Безболезненная настройка разработки для React с помощью Parcel (часть 1)
Настройка фронтенд-разработки может быть очень сложной для новичка. Помимо Javascript, CSS и HTML существует слишком много концепций, которые необходимо понять:
- Какой бандлер выбрать?
- Зачем нужно транспонировать код?
- Какие правила линтинга следует применять?
- Что вообще такое линтер?
Эта серия блогов посвящена созданию установки с минимальным количеством настроек для React с помощью Parcel. Parcel — это компоновщик Javascript, который позиционирует себя как инструмент сборки с нулевой конфигурацией.
Настройка проекта
Исходный код для демонстрации: https://github.com/EthanChenYen-Peng/parcel-react-setup
mkdir parcel-react-setup
cd parcel-react-setup
npm init -y
git init
touch .gitignore
.gitignore
node_modules/
dist/
.parcel-cache
Установите Parcel
Установите Parcel как зависимость dev
npm i -D parcel
Давайте попробуем это сделать. Сначала создадим файл src/index.html, в который поместим некоторые CSS (src/style.css) и Javascript (src/index.js) и посмотрим, работает ли он.
src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<script type="module" src="index.js"></script>
</body>
</html>
src/style.css
#root {
color: blue;
}
src/index.js
const root = document.createElement('div')
root.id = 'root'
root.textContent = 'Inserted by JS'
document.body.appendChild(root)
Запустите наш сервер разработки, используя npx parcel src/index.html. Здесь мы указываем Parcel использовать src/index.html в качестве точки входа. За более общим синтаксисом вы можете обратиться сюда.
Все работает, и CSS, и Javascript используются правильно.
Побочное замечание:
Запуск npx commandname автоматически находит правильную ссылку команды в папке node_modules проекта, без необходимости знать точный путь, и не требуя, чтобы пакет был установлен глобально и в пути пользователя.
https://nodejs.dev/learn/the-npx-nodejs-package-runner
Необходимость набиратьnpx parcel src/index.html каждый раз при запуске сервера разработки может отнимать много времени и приводить к ошибкам. К счастью, мы можем использовать сценарий NPM, чтобы сделать нашу команду более декларативной.
"scripts": {
"start": "parcel src/index.html",
"build": "parcel build src/index.html",
},
Для получения дополнительной информации о скриптах NPM я рекомендую прочитать эту статью в блоге
Освоение сценариев NPM.
Чтобы запустить сервер разработки, просто выполните команду npm run start. Примечание: Parcel также предоставляет другой способ указания точки входа с помощью source, который имеет два основных преимущества:
- Он принимает массив и может быть полезен в случае наличия нескольких точек входа.
- Нам не нужно дублировать точки входа при запуске производственной сборки.
"source": ["src/index.html"],
"scripts": {
"start": "parcel",
"build": "parcel build"
},
Настройка React
Если у вас есть опыт настройки проекта React с помощью Webpack, то вы должны быть немного знакомы с Babel, Javascript-транспайлером, который преобразует написанный вами современный Javascript в версии, понятные старым браузерам. Чтобы использовать современный синтаксис Javascript, обычно требуется установить @babel/preset-env. Кроме того, чтобы использовать JSX в react, необходимо установить @babel/preset-react.
К счастью, Parcel избавляет нас от всех этих проблем, предоставляя встроенный транспилятор с функциями, эквивалентными @babel/preset-env и @babel/preset-react.
https://parceljs.org/languages/javascript/#default-presets
Поэтому, чтобы использовать React, мы просто устанавливаем эти зависимости.
npm i react react-dom
Добавьте контейнер div для нашего приложения React в наш index.html. Обратите внимание, что мы также изменили расширение файла на jsx для нашего входного файла Javascript.
<body>
<div id="app"></div>
<script type="module" src="index.jsx"></script>
</body>
Переименуйте нашу точку входа Javascript с src/index.js на src/index.jsx.
import { createRoot } from 'react-dom/client'
function App() {
return <div>Hello from React</div>
}
const container = document.querySelector('#root')
const root = createRoot(container)
root.render(<App />)
Вот и все. Это все, что нам нужно, чтобы начать работу с React.🤯
Чтобы оценить, как много Parcel делает за сценой, давайте сравним его с базовой настройкой с помощью Webpack.
webpack.config.json
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
entry: path.resolve(__dirname, './src/index.jsx'),
module: {
rules: [
{
test: /.(ts|js)x?$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
output: {
path: path.resolve(__dirname, './build'),
filename: 'bundle.js',
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve(__dirname, './src/index.html'),
}),
],
mode: 'development',
devtool: 'cheap-module-source-map',
}
И необходимые зависимости для разработки.
"devDependencies": {
"@babel/preset-env": "^7.17.10",
"@babel/preset-react": "^7.16.7",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"style-loader": "^3.3.1",
"webpack": "^5.72.0",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.9.0"
},
Как видно, конфигурационный файл в Webpack имеет тенденцию быть очень явным. В Webpack все рассматривается как модуль, и он, по умолчанию, может понимать только JavaScript и JSON файл. Для обработки файлов других типов, кроме этих двух, требуется загрузчик. Здесь мы используем
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
Заключение
Parcel представляется отличным бандлером для начинающих. Его функциональность «из коробки» делает его удивительно низким барьером входа для людей, начинающих веб-разработку. Это очень важно, поскольку помимо темы пакетирования активов существует еще слишком много концепций, которые необходимо понять. Тратить слишком много времени на отступление о конфигурации бандлера может быть нецелесообразно.
В следующем посте я настрою линтер и форматер кода, которые очень важны для обеспечения согласованности кода и лучших практик.
Пока.