Первоначально опубликовано на https://www.code-boost.com.

Parcel - это простой в использовании инструмент сборки для объединения веб-приложений. Это более простая альтернатива Webpack, практически не требующая настройки. В этом руководстве мы настроим приложение Vanilla JavaScript, преобразуем его в приложение React, а затем развернем его в Netlify.

Базовая настройка посылки

Для начала создайте новый каталог и проект узла в терминале, используя

mkdir parcel-setup
cd parcel-setup
npm init -y

Для установки посылки воспользуйтесь командой

npm install --save-dev parcel-bundler

Это добавит parcel-bundler в наше приложение как для разработки, так и для производственных целей.

Дополнительная глобальная установка

В качестве альтернативы вы можете установить посылку глобально с помощью команды

npm install -g parcel-bundler

Это позволит вам запускать parcel команды, не добавляя parcel-bundler в ваш проект. Поскольку мы также развертываем это приложение в Интернете, я бы рекомендовал просто добавить parcel-bundler прямо в ваш проект.

Точка входа в приложение

Команда parcel упакует ваше приложение в папку dist. Указание файла html или js после этой команды укажет parcel, где искать сборку. Давайте создадим оба этих файла, чтобы настроить базовое рабочее приложение.

touch index.html
touch index.js

В файле index.html добавьте базовую настройку html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" 
        content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Parcel Setup</title>
</head>
<body>
  <div id="root"></div>
  <script src="./index.js"></script>
</body>
</html>

Также добавьте следующее в index.js

document.getElementById("root").innerText = "Parcel Basic Setup!";

Запустите приложение

Теперь у нас есть базовое рабочее веб-приложение, и мы можем запустить его локально с помощью следующей команды

parcel index.html

По умолчанию это запустит сервер разработки на http://localhost:1234/. Parcel поставляется со встроенной горячей заменой модуля, поэтому любые сохраненные изменения в нашем коде немедленно отражаются в браузере.

В настоящее время наша папка проекта должна выглядеть примерно так

parcel-setup/
- .cache
- dist
- node_modules
- index.html
- index.js
- package-lock.json
- package.json

Папки .cache и dist создаются, когда мы запускаем любую parcel команду, а папка node_modules включает наши установленные зависимости. Мы можем развернуть это приложение, добавив и запустив команду build в файл package.json, однако давайте сначала настроим React и некоторые дополнительные файлы.

Разверните это приложение Обычный JavaScript напрямую, перейдя к разделу Добавление скриптов ниже.

Добавление React в Parcel

Во-первых, нам понадобятся некоторые для добавления дополнительных пакетов в наш проект для настройки и анализа нашего React. Введите следующие команды в свой терминал

npm install react react-dom
npm install --save-dev @babel/core @babel/preset-env @babel/preset-react

Настройка Babel

Babel перенесет наш код React, чтобы браузер мог его правильно прочитать. Добавьте .babelrc файл в корень вашего проекта, где мы можем указать, какие presets и plugins использовать.

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Реорганизация файлов

Давайте создадим src/ папку на корневом уровне нашего приложения для упорядочения. Переместите файлы index.html и index.js в эту папку и создайте дополнительные файлы app.js и app.css.

Файл index.html будет точкой входа на нашу страницу, вызывая файл index.js, который перенесет наш код React. Давайте изменим index.js сейчас

import React from "react";
import ReactDOM from "react-dom";
import App from "./app";

ReactDOM.render(<App />, document.getElementById("root"));

Этот файл будет отображать наше приложение React в файле html, который мы создали ранее. Мы также импортировали "./app", который теперь можем заполнить в app.js

import React from "react";
import "./app.css";

const App = () => {
  return (
    <div>
      <h1>React Parcel Setup</h1>
    </div>
  );
};
export default App;

Здесь мы импортировали файл ./app.css, который мы уже создали. Добавьте следующий код (или что угодно) в app.css, чтобы убедиться, что он работает правильно

h1 {
  color: green;
}

Теперь у нас должно быть работающее приложение React. Проверьте это в браузере с помощью команды

parcel src/index.html

Добавление скриптов

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

"scripts": {
  "start": "parcel src/index.html",
  "build": "parcel build src/index.html"
},

Оба сценария соберут наше приложение в папку dist. Сценарий start также настроит сервер разработки в браузере. Команда build нам понадобится специально для развертывания этого приложения в производственной среде.

Добавление .gitignore

Нам также необходимо будет настроить .gitignore файл перед развертыванием, добавьте его сейчас в корень папки вашего проекта, включая как минимум следующие папки

node_modules
dist
.cache

Развернуть приложение Parcel

В Интернете есть множество мест для размещения нашего приложения. В этом руководстве мы будем использовать Netlify, поскольку он прост в настройке и имеет множество функций. Если вы еще этого не сделали, разверните свое приложение на github и зарегистрируйтесь / войдите в Netlify.

Создать наше приложение в рабочей среде так же просто, как щелкнуть New site from Git и выбрать репозиторий на github (или другом). Теперь нам просто нужно указать наши команду сборки и каталог публикации.

В поле Команда сборки введите

npm run build

а в поле Опубликовать каталог введите

dist

Затем щелкните Deploy site, и Netlify создаст приложение, разместив его на своих серверах.

Заключение

Parcel - отличная альтернатива Webpack, если вам не нужны дополнительные настройки. Поскольку Parcel поставляется с предустановленной горячей заменой модуля, поддержкой babel и по умолчанию объединяет все ваши ресурсы, это отличный инструмент для создания нового приложения.

Впервые опубликовано на https://www.code-boost.com. Посетите Code-Boost для получения современных руководств по CSS, JavaScript, React, Node, GraphQL и многому другому!