Как использовать Parcel для объединения программы React.js

1656569649 kak ispolzovat parcel dlya obedineniya programmy reactjs

Майкла Озомена

1*QrpgyDDba-3XhpRIDiPx-Q

Что такое посылка?

Parcel — это пакет веб-приложений, обеспечивающий невероятно быструю производительность с использованием многоядерной обработки и не требующий конфигурации.

Так нравится Webpack? Так же, как и Webpack, но легче и не нуждается в конфигурации.

Что предлагает данная статья.

В этой статье я покажу вам, как вы можете использовать Parcel для объединения базовой программы React.js, созданной с помощью JavaScript (ES6), HTML и CSS. Мы создаем программу React.js с нуля без использования таких инструментов, как create-react-app или что-то подобное.

Начинаем.

Первое, что нам нужно сделать, это настроить наш проект. Я создал несколько исходных файлов на GitHub, и вы можете увидеть их здесь. Когда вы клонируете проект на вашем компьютере, запустите git checkout beginning и npm install чтобы поставить вещи на начальную позицию (заметьте, что на данный момент проект на самом деле не работает, потому что у нас еще нет никаких связанных файлов).

Группировка файлов.

Теперь у нас есть простая express сервер, настроенный для обслуживания файлов с dist/ папку. Причину вы видите cannot GET / когда ты бежишь npm start и перейти к localhost:5000/ потому что еще не было создано. Таким образом, dist/ папка пуста/не существует.

Чтобы начать группировку наших файлов и чтобы что-то появлялось, когда вы заходите localhost:5000/нам нужно сделать несколько вещей:

  1. Установите Parcel, запустив npm install parcel-bundler --save.
  2. Создайте скрипты сборника.
  3. Запустите скрипты сборки и запустите наш сервер.
  4. Загрузить localhost:5000/ в браузере.

Создание сценариев сборки и пакетных файлов.

Прежде чем мы перейдем к созданию сценариев сборки и добавлению их в наш package.json файл, давайте узнаем немного больше о пакетировании файлов.

Примечание что parcel команда не будет работать, если у вас есть parcel установленный в вашем проекте node_modules папку и не использует глобально -g флаг.

Приятной функцией, которая поставляется с Parcel (кроме других удивительных вещей), является встроенная dev-server с горячей заменой модуля. Вы можете просто воспользоваться этим dev-server бегая parcel index.html где index.html это ваша запись HTML-файл.

К сожалению, мы не будем использовать dev-server функция в нашем демонстрационном проекте, потому что мы создали свой собственный маленький express сервер, но это не значит, что у нас не будет hot module replacement. Не стесняйтесь давать dev-server вращение в собственное время.

В то же время мы хотим использовать следующие команды:

  • parcel watch index.html для создания наших файлов dist/ папку и «наблюдать» за изменениями наших файлов во время режима разработки, и
  • parcel build index.html чтобы просто создать наши файлы и загрузить их dist/ папка (полезная для производственного режима).

Если бы мы бегали npm install parcel-bundler -g вместо npm install parcel-bundler --saveТогда команды в предыдущих параграфах будут работать гладко, но мы этого не сделали. Мы установили Parcel в наш местный node_modules папку и вместо запуска parcel index.htmlмы побежим ./node_modules/.bin/parcel index.html чтобы получить наши файлы в пакете.

Теперь, когда мы все это узнали, мы можем приступить к редактированию нашего package.json файл и добавив в него наши сценарии сборки.

"scripts": {
    "parcel:dev": "./node_modules/.bin/parcel index.html",
    "parcel:watch": "./node_modules/.bin/parcel watch index.html",
    "parcel:build": "./node_modules/.bin/parcel build index.html"
  }

Как видите, я создал три npm scripts. Теперь, когда мы бежим npm run parcel:watch мы встроим наши файлы в dist/ папку. Также Parcel будет следить за изменениями, которые мы вносим при редактировании CSS, HTML и JavaScript, чтобы она перезагружала страницу за нас.

Просмотр результатов.

Чтобы просмотреть наше простое приложение React.js в браузере, мы можем запустить npm start (уже существующий сценарий), чтобы начать наш express сервер, который должен слушать localhost:5000/.

Ключевые вещи, которые нужно унести.

  1. Вы можете начать работу с Parcel с абсолютно нулевыми конфигурациями. Все, что вам нужно сделать, это установить его и запустить команду.
  2. Посылка подходит как для развития, так и производства.
  3. Посылка имеет встро dev-server и hot module replacement чтобы помочь вам быстро двигаться.
  4. В Parcel есть больше, чем описано в этой статье, поэтому обязательно просмотрите документацию, чтобы получить более подробную информацию.

Надеюсь, вам понравилось. Если вы сделали, не забудьте оставить комментарий и несколько шлепков.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *