Пошаговая настройка React с нуля до развертывания
Вы можете скачать это руководство в формате PDF здесь
Итак, вы уже некоторое время используете приложение create-react-app, также известное как CRA. Это здорово, и вы можете сразу перейти к кодированию. Но когда вам нужно выйти из приложения create-react-app и начать настройку собственного приложения React? Придет время, когда нам придется отказаться от проверки безопасности и начать рисковать самостоятельно.
В этом руководстве будет рассмотрена самая простая конфигурация React, которую я лично использовал почти во всех своих проектах React. К концу этого урока у нас будет собственный шаблон, и мы изучим некоторые конфигурации из него.
Оглавление
Зачем создавать свою конфигурацию?
Есть определенные причины, по которым создание собственной конфигурации React имеет смысл. Очевидно, вы хорошо разбираетесь в React и хотите научиться самостоятельно использовать такие инструменты, как webpack и Babel. Эти инструменты сборки являются мощными, и если у вас есть дополнительное время, всегда полезно узнать о них. Разработчики по своей природе любопытные люди, поэтому, если вы чувствуете, что хотите знать, как все работает и какая часть что делает, то позвольте мне помочь вам с этим.
Кроме того, скрытие конфигурации React с помощью create-react-app предназначено для разработчиков, начинающих изучать React, т.к. конфигурация не должна мешать началу работы. Но когда все становится серьезно, конечно, вам нужно больше инструментов для интеграции в ваш проект. Подумай о:
- Добавление загрузчиков веб-пакетов дешевле, sass
- Выполнение рендеринга на стороне сервера
- Использование новых версий ЕС
- Добавление MobX и Redux
- Создание собственной конфигурации только для обучения
Если вы посмотрите в Интернете, есть некоторые хаки, чтобы обойти ограничения CRA, такие как rewired create-react-app. Но действительно, почему бы просто не изучить конфигурацию React самостоятельно? Я помогу тебе добраться туда. Шаг за шагом.
Теперь, когда вы убеждены, что нужно изучить конфигурацию, давайте начнем с инициализации проекта React с нуля.
Откройте командную строку или Git bash и создайте новый каталог.
mkdir react-config-tutorial && cd react-config-tutorial
Инициализируйте проект NPM, запустив:
npm init -y
Теперь установите реагировать
npm install react react-dom
Кроме того, вы можете просмотреть исходный код на GitHub при чтении этого руководства для пояснений о настройке.
Настройка веб-пакета 4
Нашей первой остановкой будет webpack. Это очень популярный и мощный инструмент для настройки не только React, но и почти всех фронтенд-проектов. Основная функция веб-пакета заключается в том, что он берет кучу файлов JavaScript, которые мы пишем в нашем проекте, и превращает их в один мини-файл, чтобы его можно было быстро обслуживать. Начиная с веб-пакета 4, нам вообще не требуется писать файл конфигурации, чтобы использовать его, но в этом руководстве мы напишем его, чтобы лучше понять его.
Во-первых, давайте сделаем некоторую установку
npm install --save-dev webpack webpack-dev-server webpack-cli
Это установит:
- модуль веб-пакета — которые включают в себя все основные функции веб-пакета
- webpack-dev-сервер — этот сервер разработки автоматически перезапускает webpack при изменении нашего файла
- webpack-кли — включить запуск вебпака из командной строки
Попробуем запустить webpack, добавив следующий скрипт в package.json
"scripts": {
"start": "webpack-dev-server --mode development",
},
Теперь создайте index.html файл в вашем корневом проекте со следующим содержимым:
<!DOCTYPE html>
<html>
<head>
<title>My React Configuration Setup</title>
</head>
<body>
<div id="app"></div>
<script src="./dist/bundle.js"></script>
</body>
</html>
Создайте новый каталог с именем src и внутри него создайте новый файл index.js
mkdir src && cd src && touch index.js
Затем запишите компонент React в файл:
import React from "react";
import ReactDOM from "react-dom";
class Welcome extends React.Component {
render() {
return <h1>Hello World from React boilerplate</h1>;
}
}
ReactDOM.render(<Welcome />, document.getElementById('root'));
Запустите веб-пакет, используя npm run start … И будет вызвана ошибка.
You may need an appropriate loader to handle this file type
Настройка Вавилона 7
Компонент React, который мы написали выше, использовал class синтаксис, который является особенностью ES6. Webpack нужен Babel для преобразования ES6 в синтаксис ES5, чтобы этот класс работал.
Давайте установим Babel в наш проект
npm install --save-dev @babel/core @babel/preset-env \
@babel/preset-react babel-loader
Зачем нам эти пакеты?
- @бабель/ядро является основной зависимостью, которая включает скрипт преобразования Babel
- @babel/preset-env — предустановка Babel по умолчанию, используемая для преобразования ES6+ в действительный код ES5. При желании настроить полифиллы браузера автоматически
- @babel/предварительно реагировать используется для преобразования синтаксиса классов JSX и React в действительный код JavaScript.
- вавилон-погрузчик — это загрузчик веб-пакетов, который подключает Babel к веб-пакету. Мы будем запускать Babel из веб-пакета с этим пакетом
Чтобы подключить Babel к нашему веб-пакету, нам нужно создать файл конфигурации веб-пакета. Давайте напишем webpack.config.js файл:
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './',
publicPath: '/dist/'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
}
]
},
};
Эта конфигурация веб-пакета в основном говорит, что entry точка нашего приложения находится в index.js, поэтому вытащите все, что нужно из этого файла, затем поместите output процесса объединения в расстояние каталог, названный пакет.js. О, если мы бежим webpack-dev-serverзатем Скажите серверу обслуживать контент из contentBase config, который является той же директорией, в которой находится эта конфигурация. Также поместите bundle.js в dist/ каталог, пожалуйста. Для всех файлов .js или .jsx используйте babel-loader транспилировать их все.
Чтобы использовать пресеты Babel, создайте новый .babelrc файл
touch .babelrc
Напишите следующее содержание:
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
Теперь беги npm run start опять таки. На этот раз это сработает.
Добавление красивее
Чтобы еще больше ускорить разработку, давайте сделаем форматирование нашего кода с помощью Prettier. Установите зависимость локально и используйте аргумент —save-exact, поскольку Prettier вносит стилистические изменения в выпуски исправлений.
npm install --save-dev --save-exact prettier
Теперь нам нужно написать .prettierrc конфигурационный файл:
{
"semi": true,
"singleQuote": true,
"trailingComma": "es5"
}
Правила означают, что мы хотим добавить точку с запятой в конце каждого оператора, использовать одинарную кавычку, когда это уместно, и ставить запятые в конце для многострочного кода ES5, такого как объект или массив.
Вы можете запустить Prettier из командной строки с помощью:
npx prettier --write "src/**/*.js"
Или добавьте новый скрипт в наш package.json файл:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --open --mode development",
"format": "prettier --write \"src/**/*.js\""
},
Теперь мы можем запустить Prettier, используя npm run format
Кроме того, если вы используете VSCode для разработки, вы можете установить Более красивое расширение и запускайте его каждый раз, когда вы сохраняете свои изменения, добавляя этот параметр:
"editor.formatOnSave": false
Добавление исходной карты для улучшения журналов ошибок
Поскольку webpack объединяет код, исходные карты являются обязательными для получения ссылки на исходный файл, вызвавший ошибку. Например, если вы объединяете три исходных файла (a.js, b.jsа также c.js) в один пучок (bundle.js) и один из исходных файлов содержит ошибку, трассировка стека просто укажет на bundle.js. Это проблематично, так как вы, вероятно, хотите точно знать, какой файл a, b или c вызывает ошибку.
Вы можете указать веб-пакету генерировать исходные карты, используя свойство конфигурации devtool:
module.exports = {
devtool: 'inline-source-map',
};
Хотя это приведет к замедлению сборки, это не повлияет на производство. Исходные карты загружаются только если открыть в браузере DevTools.
Настройка ESLint
Линтер — это программа, которая проверяет наш код на наличие ошибок или предупреждений, которые могут вызвать ошибки. Линтер JavaScript, ESLint, — это очень гибкая программа, которую можно настраивать разными способами.
Но прежде чем двигаться дальше, давайте установим ESLint в наш проект.
npm --save-dev install eslint eslint-loader babel-eslint eslint-config-react eslint-plugin-react
эслинт является основной зависимостью для всех функций, а eslint-loader позволяет нам подключить eslint к webpack. Теперь, поскольку React использует синтаксис ES6+, мы добавим вавилон-эслинт — синтаксический анализатор, который позволяет eslint анализировать все допустимые коды ES6+.
eslint-config-реагировать а также eslint-плагин-реагировать оба используются для того, чтобы ESLint мог использовать готовые правила.
Поскольку у нас уже есть веб-пакет, нам нужно лишь немного изменить конфигурацию:
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader']
}
]
},
};
Затем создайте файл конфигурации eslint с именем .eslintrc с этим содержанием:
{
"parser": "babel-eslint",
"extends": "react",
"env": {
"browser": true,
"node": true
},
"settings": {
"react": {
"version": "detect"
}
}
}
Конфигурация в основном говорит: «Эй, ESLint, пожалуйста, проанализируйте код, используя babel-eslint прежде чем проверять его, и когда вы проверяете его, проверьте, все ли правила из нашей конфигурации правил React переданы. брать глобальные переменные из среды браузера и узла. Да, и если это код React, возьмите версию из самого модуля. Таким образом, пользователю не придется указывать версию вручную».
Вместо того, чтобы указывать наши собственные правила вручную, мы просто расширяем react правила, которые были предоставлены eslint-config-react eslint-plugin-react
Я нашел ошибки! Что я делаю?
К сожалению, единственный способ понять, как исправить ошибки ESLint, — это просмотреть документацию по правила. Есть быстрый способ исправить ошибки ESLint, используя eslint --fix, и это на самом деле хорошо для быстрого исправления. Добавим скрипт на наш package.json файл:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server --mode development",
"format": "prettier --write \"src/**/*.js\"",
"eslint-fix": "eslint --fix \"src/**/*.js\"", // the eslint script
"build": "webpack --mode production"
},
Затем запустите его с npm run eslint-fix. Не волнуйтесь, если вы все еще не уверены в ESLint. Вы узнаете больше о ESLint по мере его использования.
Добавление процессора CSS LESS
Чтобы добавить процессор LESS в наше приложение React, нам потребуются пакеты less и loader из webpack.
npm install --save-dev less less-loader css-loader style-loader
less-loader скомпилирует наш файл less в css, а css-loader будет разрешать синтаксис css, например import или же url(). style-loader получит наш скомпилированный css и загрузит его в <style> тег в нашем комплекте. Это отлично подходит для разработки, потому что позволяет нам обновлять наш стиль на лету, без необходимости обновлять браузер.
Теперь давайте добавим файл css, создадим новый каталог стилей в src/style
cd src && mkdir style && touch header.less && touch main.less
header.less содержание:
.header {
background-color: #3d3d;
}
main.less содержание:
@import "header.less";
@color: #f5adad;
body {
background-color: @color;
}
Теперь импортируйте наш main.less файл из index.js:
import "./style/main.less";
Затем обновите нашу конфигурацию веб-пакета module имущество:
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader']
},
{
test: /\.less$/,
use: [
'style-loader',
'css-loader',
'less-loader',
],
},
]
},
Запустите скрипт запуска, и все готово!
Развертывание приложения React в Netlify
Все приложения должны быть развернуты на последнем этапе, а для приложения React развертывание очень простое.
Во-первых, давайте изменим вывод сборки и разработку contentBase из dist к build в нашей конфигурации Webpack.
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'build'),
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: "./build",
},
Теперь давайте установим новый плагин Webpack с именем HtmlWebpackPlugin.
npm install html-webpack-plugin -D
Этот плагин будет генерировать index.html файл в том же каталоге, где наш bundle.js создан Webpack. В этом случае build каталог.
Зачем нам этот плагин? Поскольку Netlify требует, чтобы один каталог был корневым, поэтому мы не можем использовать index.html в нашем корневом каталоге с помощью Netlify. Вам нужно обновить конфигурацию вашего веб-пакета, чтобы она выглядела следующим образом:
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:
output: {
},
devServer: {
contentBase: "./build",
},
module: {
},
plugins: [
new HtmlWebpackPlugin({
template: path.resolve('./index.html'),
}),
]
};
И, пожалуйста, удалите script тег от вашего index.html:
<!DOCTYPE html>
<html>
<head>
<title>My React Configuration Setup</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Теперь вы можете протестировать конфигурацию с помощью npm run build команда. Как только это будет сделано, отправьте шаблон в репозиторий GitHub. Пришло время развернуть наше приложение!
Давайте зарегистрируем учетную запись Netlify.
Если вы раньше не слышали о Netlify, это потрясающий хостинг статических сайтов, который предоставляет все инструменты, необходимые для бесплатного развертывания статического сайта. Что такое статический сайт? Это веб-сайт, созданный из набора статических HTML-страниц без какой-либо серверной части. Наш шаблон React в том виде, в каком он есть, теперь считается статическим сайтом, потому что у нас нет настроенного бэкэнда, и это только HTML и JavaScript.
После регистрации выберите новый сайт из Git и выберите GitHub в качестве поставщика Git.
Вам необходимо предоставить разрешения для Netlify, а затем выбрать шаблонный репозиторий React.
Теперь вам нужно ввести команду сборки и каталог публикации. Как видите, именно поэтому нам нужен HtmlWebpackPlugin, потому что нам нужно обслуживать все только из одного каталога. Вместо того, чтобы вручную обновлять наш корень index.html файл для изменений, мы просто генерируем его с помощью плагина.
Убедитесь, что у вас есть та же команда, что и на снимке экрана выше, иначе ваше приложение может не запуститься.
Вывод
Вы только что создали свой собственный шаблон проекта React и развернули его в Netlify. Поздравляем! Конечно, я не очень углублялся в настройки веб-пакетов, потому что этот шаблон предназначен для универсального запуска. В некоторых случаях, когда нам нужны расширенные функции, такие как рендеринг на стороне сервера, нам нужно снова настроить конфигурацию. Но не волнуйтесь! Вы зашли так далеко, а это значит, что вы уже понимаете, что делают webpack, Babel, Prettier и ESLint. Webpack имеет много мощных загрузчиков, которые могут помочь вам во многих случаях, с которыми вы часто сталкиваетесь при создании веб-приложения. Не волнуйтесь, если вам все еще не нравятся конфигурации. Вы привыкнете к этому, когда будете больше практиковаться.
Кроме того, я пишу книгу о правильном изучении React без стресса. Вы можете проверить это здесь.
