Первоначально опубликовано на 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 и многому другому!