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

Таким образом, вы уже некоторое время используете 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-React-App Rewareed Отказ Но действительно, почему бы не просто учиться на конфигурации реагирования самостоятельно? Я помогу тебе добраться туда. Шаг за шагом.

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

Откройте командную строку или 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. При желании автоматически настраивает полифиллирование браузера.
• @ 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: './dist',
  },
  module: {
    rules: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      use: ['babel-loader']
    }
    ]
  },
};

Этот конфигурация WebPack в основном говорит, что Вход Точка нашего приложения от index.js, поэтому потяните все, что нужно, чтобы этот файл, затем поставьте Выход процесса соединения в Dist каталог, названный bundle.js Отказ О, если мы работаем на WebPack-Dev-Server Затем сообщите серверу, чтобы обслуживать контент от Contentbase config, который такой же каталог, в этом конфиге есть. Для всех файлов .js или .jsx используйте Babel-Loader транпиливать все они.

Для того, чтобы использовать предустановки Babel, создайте новый .babelrc файл

touch .babelrc

Напишите следующий контент:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

Сейчас беги NPM запустить начало опять таки. На этот раз это будет работать.

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

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

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 --mode development",
 "format": "prettier --write \"src/**/*.js\""
},

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

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

"editor.formatOnSave": true

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

Поскольку WebPack устанавливает код, исходные карты являются обязательными для получения ссылки на исходный файл, который поднял ошибку. Например, если вы связываете три исходных файла ( 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
};

Хотя это приведет к более медленной сборке, оно не влияет на производство. 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"
    }
  }
}

Конфигурация в основном говорит, «Эй, Эсвет, пожалуйста, анализируйте код, используя Babel-Eslint Прежде чем проверять его, и когда вы проверяете его, пожалуйста, проверьте, пройдены ли все правила наших правила React Revices. Принимать глобальные переменные из среды Браузер и узел. О, и если это код RACT, возьмите версию из самого модуля. Таким образом, пользователю не придется указывать версию вручную. »

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

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

К сожалению, единственный способ действительно выяснить, как исправить ошибки Eslint, посмотрев на документацию для правила Отказ Есть быстрый способ исправить ошибки Eslint с помощью Eslint - исправить , и это на самом деле хорошо для быстрого исправления. Давайте добавим сценарий на нашем 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, а CSS-Loader Разрешит синтаксис CSS, как Импорт или URL () Отказ Стиль-погрузчик Получите наши скомпилированные CSS и загрузите его в Le> тег в нашем пачке. Это отлично подходит для развития, потому что он позволяет нам обновлять наш стиль на лету, не требуя обновления браузера.

Теперь давайте добавим некоторые файлы 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 Файл для изменений мы просто генерируем его с помощью плагина.

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

Как только статус развертывания превращается в Опубликовано (Номер 2 выше), вы можете перейти на случайное имя сайта NetLify присвоено для вашего приложения (номер 1).

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

Вывод

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

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

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

Вы можете прочитать больше моих учебных пособий по реагированию в Sebhastian.com Отказ