Настройка интерфейса разработки может быть очень сложной для новичка. Помимо Javascript, CSS и HTML, слишком много понятий для понимания:
- Какой упаковщик выбрать?
- Зачем нам нужно транспилировать наш код?
- Какие правила линтинга я должен применять?
- Что вообще такое линтер?
Эта серия блогов посвящена созданию установки с минимальным количеством настроек для React с использованием Parcel. Parcel — это самоуверенный сборщик Javascript, который позиционирует себя как _инструмент сборки с нулевой конфигурацией_.
Настройка проекта
[Исходный код для демонстрации: https://github.com/EthanChenYen-Peng/parcel-react-setup](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 как зависимость от разработчиков
npm i -D parcel
Давайте попробуем. Сначала мы создаем файл `src/index.html`, который содержит некоторые источники CSS (`src/style.css`) и Javascript (`src/index.js`), чтобы посмотреть, работают ли они.
`источник/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 посылка src/index.html`. Здесь мы указываем Parcel использовать `src/index.html` в качестве точки входа. Для более общего синтаксиса вы можете обратиться к здесь (https://parceljs.org/features/targets/#%24-parcel-%3Centries%3E)
Это работает, и CSS, и Javascript указаны правильно.
Примечание:
`parcel` — это интерфейс командной строки, предоставляемый пакетом Parcel, когда мы устанавливали его как зависимость для разработки. Это просто файл сценария, написанный в файле NodeJS, который можно найти в `‹project_dir›/node_modules/.bin/parcel`. Другими словами, вы можете запустить сервер разработки с помощью команды `./node_modules/.bin/parcel src/index.html`. Однако использование `npx` (работа пакета Node) короче, и это то, что вы найдете в документации и руководствах.
Запуск npx commandname автоматически находит правильную ссылку на команду внутри папки node_modules проекта, не зная точного пути и не требуя глобальной установки пакета по пути пользователя.
https:/ /nodejs.dev/learn/the-npx-nodejs-package-runner
Необходимость вводить `npx посылка src/index.html` каждый раз, когда мы запускаем сервер разработки, может занять много времени и привести к ошибкам. К счастью, мы можем использовать [**скрипт NPM**](https://docs.npmjs.com/cli/v8/using-npm/scripts), чтобы сделать нашу команду более декларативной.
“scripts”: {
“start”: “parcel src/index.html”,
“build”: “parcel build src/index.html”,
},
Для получения дополнительной информации о **скрипте NPM** я рекомендую прочитать этот пост в блоге
Мастерство скриптов NPM (https://dev.to/paulasantamaria/mastering-npm-scripts-2chd).
Чтобы запустить сервер разработки, просто запустите `npm run start`. Примечание. Parcel также предоставляет другой способ указания точки входа с использованием `source`, который дает два основных преимущества:
1. Он принимает массив и может быть полезен в случае наличия нескольких точек входа.
2. Нам не нужно дублировать точки входа при запуске установки производственной сборки.
“source”: [“src/index.html”],
“scripts”: {
“start”: “parcel”,
“build”: “parcel build”
},
```
Настройка
Если у вас есть опыт настройки проекта React с использованием **Webpack**, вы должны быть немного знакомы с **Babel**, транспилятором Javascript, который преобразует написанный вами современный Javascript в версии, понятные старым браузерам. Чтобы использовать современный синтаксис Javascript, вам обычно нужно установить @babel/preset-env. В дополнение к этому, чтобы использовать `JSX` в реакции, вам также необходимо установить `@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.
`index.html`
<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”: “⁷.17.10”,
“@babel/preset-react”: “⁷.16.7”,
“babel-loader”: “⁸.2.5”,
“css-loader”: “⁶.7.1”,
“html-webpack-plugin”: “⁵.5.0”,
“style-loader”: “³.3.1”,
“webpack”: “⁵.72.0”,
“webpack-cli”: “⁴.9.2”,
“webpack-dev-server”: “⁴.9.0”
},
Как может показаться, файл конфигурации в **Webpack** имеет тенденцию быть очень явным. В **Webpack** все рассматривается как модуль, и по умолчанию он может понимать только файлы JavaScript и JSON. Для обработки типов файлов, отличных от этих двух, требуется _loader_. Здесь мы используем
- `css-loader`, чтобы Webpack мог загружать CSS.
- `style-loader`, чтобы внедрить CSS в выходной HTML.
- `babel-loader`, чтобы использовать _Babel_ для транспиляции современного Javascript и JSX. в более старую версию; он будет получать конфигурацию из файла конфигурации, т.е. (`.babelrc.json`).
{
“presets”: [“@babel/preset-env”, “@babel/preset-react”]
}
Заключение
Parcel кажется отличным сборщиком для начинающих. Его стандартная функциональность обеспечивает удивительно низкий порог входа для людей, начинающих веб-разработку. Это очень важно, так как существует слишком много концепций, которые нужно понять, помимо темы объединения активов. Тратить слишком много времени на настройку сборщика может быть потрачено не зря.
В следующем посте я настрою линтер и средство форматирования кода, которые имеют решающее значение для обеспечения согласованности кода и лучших практик.
А сейчас до свидания.
