Автор оригинала: Nathan Sebhastian.

Вы можете скачать это руководство как PDF здесь

Таким образом, вы уже некоторое время используете Create-React-App A.K.A CRA. Это отлично, и вы можете получить прямо к кодированию. Но когда вам нужно выбрать из приложения Create-React-App и начните настройку собственного приложения React? Там будет время, когда мы должны отпустить проверку безопасности и начать рискнуть на наших собственных.

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

Оглавление

• Зачем создать свою собственную конфигурацию?
• Настройка WebPack 4
• Настройка бабела 7.
• Добавление красивее
• Добавление исходной карты для лучших журналов ошибок
• Настройка Eslint.
• Я нашел ошибки! Что мне делать?
• Добавление CSS меньше процессора
• Развертывание приложения React в NetLify
• Заключение

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

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

Кроме того, конфигурация укрытия RACT с помощью App Create-React-App предназначена для разработчиков, начиная с участием реагирования, как Конфигурация не должна стоять на пути работы Отказ Но когда все становится серьезным, конечно, вам нужно больше инструментов для интеграции в ваш проект. Думать о:

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

Если вы осмотрите через Интернет, есть некоторые хаки, чтобы обойти ограничения CRA, такие как Create-raction-App Reware. Но действительно, почему бы не просто учиться на конфигурации реагирования самостоятельно? Я помогу тебе добраться туда. Шаг за шагом.

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

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

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

Инициализировать проект NPM путем работы:

npm init -y

Теперь установите реакцию

npm install react react-dom

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

Настройка WebPack 4

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

Во-первых, давайте сделаем некоторые установку

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

Это будет установлено:

• Модуль WebPack – которые включают в себя все основные функции WebPack
• WebPack-Dev-Server – Этот сервер разработки автоматически повторяется WebPack, когда наш файл изменен
• WebPack-Cli – Включить запущенный веб-папак из командной строки

Давайте попробуем запустить WebPack, добавив следующий скрипт в Package.json.

"scripts": {
  "start": "webpack-dev-server --mode development",
},

Теперь создайте index.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 
Hello World from React boilerplate
;
  }
}

ReactDOM.render(, document.getElementById('root'));

Запустите WebPack, используя NPM запустить начало … и ошибка будет запущена.

You may need an appropriate loader to handle this file type

Настройка бабела 7.

Компонент React Wee написал выше использовал Класс Синтаксис, который является особенностью 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. Опционально настроить браузер Polyfills автоматически
• @ Babel/Preset-React используется для преобразования синтаксиса класса JSX и RACT в действительный код JavaScript
• Babel-Loader это погрузчик WebPack, который крюкнут Babel в WebPack. Мы будем бежать в бабеле с WebPack с этим пакетом

Чтобы зацепить Babel в нашем WebPack, нам нужно создать файл конфигурации WebPack. Давайте напишем 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']
      }
    ]
  },
};

Этот конфигурация WebPack в основном говорит, что Вход Точка нашего приложения от index.js, поэтому потяните все, что нужно, чтобы этот файл, затем поставьте Выход процесса соединения в Dist каталог, названный bundle.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 запустить начало очередной раз. На этот раз это будет работать.

Добавление красивее

Для дальнейшего ускорения разработки давайте сделаем наш код, используемый более красивым. Установите зависимость локально и используйте точный аргумент -save, поскольку Reettier внедряет стилистические изменения в патчах.

npm install --save-dev --save-exact prettier

Теперь нам нужно написать .Prettierrc конфигурационный файл:

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5"
}

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

Вы можете запустить красивее из командной строки с:

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\""
},

Теперь мы можем запустить красивее, используя NPM запустить формат

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

"editor.formatOnSave": false

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

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

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

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

};

Хотя это вызовет медленную сборку, оно не влияет на производство. SourceMaps только скачаны Если вы откроете браузер devtools Отказ

Настройка Eslint.

Linter – это программа, которая проверяет наш код для любой ошибки или предупреждения, которое может вызвать ошибки. Linter, Eslint JavaScript, является очень гибкой программой льминирования, которая может быть настроена во многих отношениях.

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

npm --save-dev install eslint eslint-loader babel-eslint eslint-config-react eslint-plugin-react

Eslint Является ли основной зависимостью для всех функций, в то время как погрузчик ESLINT позволяет нам зацепить Eslint в WebPack. Сейчас с момента реакции используются синтаксис ES6 +, мы добавим Babel-Eslint – парсер, который позволяет ESLINT для Lint все действительные ES6 + коды.

eslint-config-rect и eslint-plugin-rect оба используются для включения ESLINT для использования предварительно сделанных правил.

Поскольку у нас уже есть WebPack, нам нужно слегка изменять конфин:

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 Rection Config. Глобальные переменные из окружающей среды браузера и узла. О, и если это код RACT, возьмите версию из самого модуля. Таким образом, пользователю не придется указывать версию вручную.

Вместо того, чтобы указывать наши собственные правила вручную, мы просто распространяем реагировать Правила, которые были сделаны доступен eslint-config-rect eslint-plugin-reac

Я нашел ошибки! Что мне делать?

К сожалению, единственный способ действительно выяснить, как исправить ошибки 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 запустить eslint-fix Отказ Не волнуйтесь, если вы все еще незгаете о Eslint сейчас. Вы узнаете больше о Eslint, как вы его используете.

Добавление CSS меньше процессора

Чтобы добавить меньше процессора в наше приложение React Application, нам потребуются пакеты меньше и погрузчика из WebPack

npm install --save-dev less less-loader css-loader style-loader

Менее погрузчик Будет компилировать наш меньшей файл в CSS, Whil CSS-Loader Разрешит синтаксис CSS, как Импорт или URL () Отказ Стиль-погрузчик Получите наши скомпилированные CSS и загрузите его в <СТИЛЬ> Тег в нашем пачке. Это отлично подходит для развития, потому что оно позволяет нам обновлять наш стиль на лету, не требуя обновления браузера.

Теперь давайте добавим файл CSS создать новый каталог стилей в SRC/стиль

cd src && mkdir style && touch header.less && touch main.less






содержание:

.header {
  background-color: #3d3d;
}

main.less содержание:

@import "header.less";

@color: #f5adad;

body {
  background-color: @color;
}

Теперь импортируйте наши main.less Файл из index.js :

import "./style/main.less";

Затем обновите наш конфигурацию WebPack модуль имущество:

module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader', 'eslint-loader']
      },
      { 
        test: /\.less$/,
        use: [ 
          'style-loader',
          'css-loader', 
          'less-loader',
        ],
      },
    ]
  },

Запустите сценарий запуска, и мы приятно идти!

Развертывание приложения React в NetLify

Все приложения должны быть развернуты для его последнего шага, а для приложения Ract, развертывание очень легко.

Во-первых, давайте изменим вывод сборки и разработки Contentbase от Dist к построить На нашем конфиге 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. В этом случае построить каталог.

Почему нам нужен этот плагин? Поскольку NetLify требует, чтобы один каталог был сделан корневым каталогом, поэтому мы не можем использовать index.html В нашем корневом каталоге с использованием NetLify. Вам нужно обновить ваш веб-пакет Config, чтобы выглядеть так:

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'),
    }),
  ]
};

И, пожалуйста, удалите Сценарий Тег от вашего index.html :

Теперь вы можете проверить конфигурацию с NPM запустить сборку команда. Как только это будет сделано, нажмите свою котующую таблицу в репо Github. Пришло время развернуть наше приложение!

Давайте зарегистрируем учетную запись NetLify.

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

После регистрации выберите новый сайт из Git и выберите GitHub в качестве поставщика Git

Вам необходимо предоставить разрешения для NetLify, а затем выберите вашу React Boaterplate Repo.

Теперь вам нужно ввести команду сборки и издательства. Как видите, именно поэтому нам нужен HTMLWebpackPlugin, потому что нам нужно все для сервера только из одного каталога. А не вручную обновлять наши root index.html Файл для изменений мы просто генерируем его с помощью плагина.

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

Заключение

Вы только что создали свой собственный реактивный проект Boaterplate и развертывают его, чтобы прожить, чтобы подключиться к NetLify. Поздравляю! Уважаемый, я не пошел очень глубоко на конфигурациях WebPack, потому что эта котельная предназначена для общего стартера. В некоторых случаях, когда нам нужны расширенные функции, такие как рендеринг Server Side, нам нужно снова настроить конфигурацию. Но не волнуйся! Вы пришли так далеко, что означает, что вы уже понимаете, какой WebPack, Babel, красивее и Eslint. У WebPack есть много мощных погрузчиков, которые могут помочь вам со многими случаями, которые вы часто встречаете при создании веб-приложения. Не волнуйтесь, если вам все еще неудобно с конфигурациями. Вы привыкнете к этому, когда вы практикуете больше.

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