ParcelJS: Насколько это на самом деле просто?
ParcelJS обещает стать «молниеносно быстрым сборщиком веб-приложений с нулевой конфигурацией».
Я хотел проверить это…
Начало работы
Для начала я создал пустой каталог и следовал руководству по установке здесь: https://parceljs.org/getting_started.html.
Теперь, когда у меня были необходимые инструменты CLI, я хотел посмотреть, как быстро я смогу что-то запустить и запустить. Я решил собрать простое приложение для реагирования.
Это то, что я делал много раз с webpack, но мне всегда требовалось полчаса или около того, чтобы начать с чистого листа.
На первый взгляд простой первый шаг
Итак, согласно документации, я мог просто создать несколько файлов и начать работу. Я начал новый проект узла с yarn init и создал свой статический html-файл index.html.
Чтобы проверить, что все это работает правильно, я быстро создал простой файл javascript с именем app.js, который будет записывать в консоль сообщение на мой терминал:
// app.js
console.log('Hello From Parcel');
Затем я просто запустил команду parcel, чтобы запустить приложение: NODE_ENV=development parcel ./index.html, к моему удивлению, кое-что начало происходить. Меня встретили красивым сообщением о том, что я могу видеть свое приложение, работающее на http://localhost:1234/. Посетив это и проверив свою консоль, я был очень рад увидеть, что сообщение отображается, как и ожидалось.
Ух ты .. ты получил его, чтобы поздороваться?
Хорошо, да, это очень тривиальный пример, поэтому давайте продолжим работу с приложением реакции и посмотрим, что произойдет.
Примечание. С этого момента я буду предполагать, что люди знают, как работает реакция. Если нет, то в Интернете есть отличные руководства.
Итак, следующим шагом было создание реагирующего компонента для рендеринга на странице, я снова пошел на простое изменение. Вместо того, чтобы записывать «Hello From Parcel» на свою консоль, я просто хотел получить этот рендеринг в виде текста в DOM.
Для этого я создал простой компонент реакции без сохранения состояния:
Затем я обновил свой код в app.jsfile, чтобы отобразить мои компоненты в DOM.
И с этим я просто перезапустил предыдущую команду: NODE_ENV=development parcel ./index.html и обновил окно браузера, а также мое изумление, там все было напечатано ясно, как день.
Итак, я знаю, что все вышеперечисленное очень просто, но теперь это не отличается от создания обычного приложения для реагирования. Добавление маршрутизации, редукции и т. Д. Все просто работает. Для меня это изменило правила игры, я был так впечатлен тем, как быстро я начал работать, не прыгая по файлам конфигурации babel и webpack. Одна команда, чтобы править всеми.
Дополнительные шикарные функции
Поэтому я не касался их в основной статье, поскольку хотел, чтобы все было просто, но на самом деле Parcel поставляется с гораздо большим, чем то, что я упомянул выше. Я просто должен был разделить с тобой радость.
Поддержка CSS и МЕНЬШЕ
Итак, я хотел добавить немного стилей, о, отлично, еще один плагин для веб-пакетов, о нет, наоборот. Сделать это с помощью Parcel было проще простого. Вы можете буквально создать файл с именем styles.less, а затем импортировать его в свой javascript по мере необходимости. В моем случае я просто добавил одну строку в свой app.js файл:
Бум у меня был стиль.
Горячая перезагрузка
«Мне слишком лень обновлять свой браузер каждый раз, когда я вношу изменения, поэтому мне лучше установить этот плагин webpack здесь, чтобы сделать это за меня» - Том Вэнс 2018
Больше никогда! Parcel поставляется с горячей перезагрузкой из коробки, просто добавьте 3 строки javascript в вашу основную точку входа, в моем случае app.js:
// Hot Module Replacement
if (module.hot) {
module.hot.accept()
}
Да ладно, это действительно просто.
Разделение кода
Да, этот не так прост, как другие, но с одним дополнительным модулем все становится проще простого.
Parcel поставляется с возможностью разделения кода. Однако для ознакомления с React требуется немного больше работы, я имею в виду, что я только что сэкономил вам около сорока минут в этой статье.
Лучший способ, который я нашел, чтобы использовать разделение кода в React и справиться со всеми асинхронными хакерскими атаками, - это использовать этот замечательный модуль:
Я решил написать свой собственный небольшой HOC вокруг этого, поскольку это облегчило мне жизнь на протяжении всего проекта. Ниже этот HOC и пример его использования:
Вышеупомянутое представляет собой реагирующий маршрутизатор, но по уважительной причине лучший способ, которым я мог проверить разбиение кода, - это убедиться, что они загружаются по разным маршрутам. Возможно, я напишу больше о том, как разбиение кода работает в Parcel, но пока вы застряли на этом.
Просто открыв вкладку сети в chrome dev tools и переключившись с маршрута / на маршрут /#/about, вы увидите, как загружаются два фрагмента.
В заключение
Просто это офигенно, все просто работает. Вы должны просто использовать это и покончить с этим.
Если серьезно, то то, как быстро все меняется во фронтенд-мире, такие инструменты, как этот, имеют решающее значение. Это экономит время и силы и действительно позволяет вам приступить к важным частям создания ваших приложений.
Безумный реквизит ребятам с https://parceljs.org/
