Итак, вы уже какое-то время используете create-response-app, также известное как CRA. Это здорово, и вы можете сразу приступить к программированию. Но когда вам нужно выйти из приложения create-response-app и начать настройку собственного приложения React? Придет время, когда нам придется отказаться от проверки безопасности и начать выходить на улицу самостоятельно.

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

Оглавление

Зачем создавать свою конфигурацию?

Есть определенные причины, по которым имеет смысл создание вашей собственной конфигурации React. Вы, вероятно, хорошо разбираетесь в React и хотите научиться использовать такие инструменты, как webpack и Babel, самостоятельно. Эти инструменты сборки очень эффективны, и если у вас есть дополнительное время, всегда полезно о них узнать.

Разработчики от природы любопытные люди, поэтому, если вы чувствуете, что хотите знать, как все работает и какая часть что делает, позвольте мне помочь вам с этим.

Кроме того, скрытие конфигурации React с помощью create-react-app предназначено для разработчиков, начинающих изучать React, поскольку конфигурация не должна мешать началу работы. Но когда все становится серьезным, конечно, вам нужно больше инструментов для интеграции в ваш проект. Подумать о:

  • Добавление загрузчиков веб-пакетов за меньшие деньги
  • Выполнение рендеринга на стороне сервера
  • Использование новых версий ES
  • Добавление MobX и Redux
  • Создание собственной конфигурации просто для обучения

Если вы посмотрите в Интернете, есть несколько приемов, позволяющих обойти ограничения CRA, такие как rewired create-response-app. Но почему бы просто не изучить конфигурацию React самостоятельно? Я помогу тебе туда добраться. Шаг за шагом.

Теперь, когда вы убедились в необходимости изучить некоторую конфигурацию, давайте начнем с инициализации проекта React с нуля.

Откройте командную строку или Git bash и создайте новый каталог.

mkdir react-config-tutorial && cd react-config-tutorial

Инициализируйте проект NPM, запустив:

npm init -y

Теперь установите React

npm install react react-dom

Кроме того, вы можете просмотреть исходный код на GitHub во время чтения этого руководства для объяснения настроек.

Настройка webpack 4

Наша первая остановка - это веб-пакет. Это очень популярный и мощный инструмент для настройки не только React, но и почти всех интерфейсных проектов. Основная функция webpack заключается в том, что он принимает кучу файлов JavaScript, которые мы пишем в нашем проекте, и превращает их в один минифицированный файл, чтобы его можно было быстро обслуживать. Начиная с webpack 4, нам совсем не нужно писать файл конфигурации для его использования, но в этом руководстве мы напишем его, чтобы лучше понять его.

Сначала займемся установкой

npm install --save-dev webpack webpack-dev-server webpack-cli

Это установит:

  • модуль веб-пакета - который включает все основные функции веб-пакета.
  • webpack-dev-server - этот сервер разработки автоматически перезапускает webpack при изменении нашего файла.
  • webpack-cli - разрешить запуск 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="root"></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

Настройка Babel 7

Компонент React, который мы написали выше, использовал синтаксис class, который является особенностью ES6. Webpack нужен Babel для преобразования ES6 в синтаксис ES5, чтобы этот класс работал.

Давайте установим Babel в наш проект

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

Зачем нужны эти пакеты?

  • @ babel / core - это основная зависимость, включающая скрипт преобразования babel.
  • @ babel / preset-env - это предустановка Babel по умолчанию, используемая для преобразования ES6 + в действительный код ES5. При желании настраивает полифиллы браузера автоматически.
  • @ babel / preset-response используется для преобразования синтаксиса классов JSX и React в допустимый код JavaScript.
  • babel-loader - это загрузчик веб-пакетов, который подключает Babel к веб-пакету. Мы будем запускать Babel из веб-пакета с этим пакетом.

Чтобы подключить Babel к нашему веб-пакету, нам нужно создать файл конфигурации веб-пакета. Напишем webpack.config.js файл:

module.exports = {
  entry: './src/index.js',
  output: {
    path: __dirname + '/dist',
    publicPath: '/',
    filename: 'bundle.js'
  },
  devServer: {
    contentBase: './dist',
  },
  module: {
    rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader']
    }
    ]
  },
};

Эта конфигурация веб-пакета в основном говорит о том, что точка entry нашего приложения взята из index.js, поэтому вытащите все, что нужно для этого файла, затем поместите output процесса сборки в каталог dist с именем bundle.js. О, если мы работаем на webpack-dev-server, тогда скажите серверу обслуживать контент из contentBase config, который находится в том же каталоге, в котором находится эта конфигурация. Для всех файлов .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 --mode development",
 "format": "prettier --write \"src/**/*.js\""
},

Теперь мы можем запустить Prettier, используя npm run format.

Кроме того, если вы используете VSCode для разработки, вы можете установить Prettier extension и запускать его каждый раз при сохранении изменений, добавив этот параметр:

"editor.formatOnSave": true

Добавление исходной карты для улучшения журналов ошибок

Поскольку веб-пакет объединяет код, исходные карты являются обязательными для получения ссылки на исходный файл, в котором возникла ошибка. Например, если вы объединяете три исходных файла (a.js, b.js и c.js) в один пакет (bundler.js), и один из исходных файлов содержит ошибку, трассировка стека просто укажет на bundle.js. Это проблематично, поскольку вы, вероятно, захотите точно знать, является ли файл a, b или c причиной ошибки.

Вы можете указать webpack генерировать исходные карты, используя свойство конфигурации devtool:

module.exports = {
  devtool: 'inline-source-map',
  // … the rest of the config
};

Хотя это приведет к более медленной сборке, это не повлияет на производство. Исходные карты загружаются только если вы откроете браузер DevTools.

Настройка ESLint

ЛИНТЕР - это программа, которая проверяет наш код на наличие ошибок или предупреждений, которые могут вызвать сбои. Линтер JavaScript, ESLint, - очень гибкая программа линтинга, которую можно настраивать разными способами.

Но прежде чем мы продолжим, давайте установим ESLint в наш проект:

npm --save-dev install eslint eslint-loader babel-eslint eslint-config-react eslint-plugin-react
  • eslint - это основная зависимость для всех функций, а eslint-loader позволяет нам подключить eslint к webpack. Теперь, поскольку React использует синтаксис ES6 +, мы добавим babel-eslint - парсер, который позволяет eslint линтировать все допустимые коды ES6 +.
  • eslint-config-react и eslint-plugin-react используются, чтобы разрешить ESLint использовать предварительно созданные правила.

Поскольку у нас уже есть веб-пакет, нам нужно лишь немного изменить конфигурацию:

module.exports = {
  // modify the module
  module: {
    rules: [{
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader', 'eslint-loader'] // include 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'), // change this
    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 файл для внесения изменений, мы просто генерируем его с помощью плагина.

Убедитесь, что у вас есть та же команда, что и на скриншоте выше, иначе ваше приложение может не работать.

Как только статус развертывания изменится на published (цифра 2 выше), вы можете перейти на случайное имя сайта, назначенное Netlify для вашего приложения (номер 1).

Ваше приложение React развернуто. Потрясающие!

Заключение

Вы только что создали свой собственный шаблон проекта React и развернули его в Netlify. Поздравляю! Конечно, я не особо углублялся в конфигурации веб-пакетов, потому что этот шаблон предназначен для использования в качестве общего стартера. В некоторых случаях, когда нам нужны расширенные функции, такие как рендеринг на стороне сервера, нам нужно снова настроить конфигурацию.

Но расслабься! Вы зашли так далеко, что означает, что вы уже понимаете, что делают webpack, Babel, Prettier и ESLint. Webpack имеет множество мощных загрузчиков, которые могут помочь вам во многих случаях, с которыми вы часто сталкиваетесь при создании веб-приложения.

Кроме того, в настоящее время я пишу книгу, чтобы помочь разработчикам программного обеспечения узнать о React, так что вы можете проверить это!

Больше руководств по React на sebhastian.com