Как оптимизировать процесс разработки React.js с помощью Webpack 4

1656622360 kak optimizirovat proczess razrabotki reactjs s pomoshhyu webpack 4

Маргарита Образцова

cHQDWCi3tJ0aKAmxuBwgEqBwHgLTKJ6PbACX
Оригинал фото по ссылке: https://www.instagram.com/p/BiaH379hrAp/?taken-by=riittagirl

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

Почемувы можете спросить?

Потому что выполнение ручной работы очень контрпродуктивно, когда дело доходит до программирования. Мы хотим максимально автоматизироваться. Поэтому я покажу вам какие части процесса разработки с React мы можем настроить с помощью Webpack v4.6.0.

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

Настройка Webpack

В вашем webpack.config.jsвведите следующий код:

// webpack v4const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const WebpackMd5Hash = require('webpack-md5-hash');const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {  entry: { main: './src/index.js' },  output: {    path: path.resolve(__dirname, 'dist'),    filename: '[name].[chunkhash].js'  },  module: {    rules: [      {        test: /\.js$/,        exclude: /node_modules/,        use: {          loader: "babel-loader"        }      }    ]  },  plugins: [     new CleanWebpackPlugin('dist', {} ),    new HtmlWebpackPlugin({      inject: false,      hash: true,      template: './src/index.html',      filename: 'index.html'    }),    new WebpackMd5Hash()  ]};

и в вашем package.json:

{ "name": "post", "version": "1.0.0", "description": "", "main": "index.js", "scripts": {  "build": "webpack --mode production",  "dev": "webpack --mode development" },  "author": "", "license": "ISC", "devDependencies": {    "babel-cli": "^6.26.0",    "babel-core": "^6.26.0",    "babel-loader": "^7.1.4",    "babel-preset-env": "^1.6.1",    "babel-preset-react": "^6.24.1",    "babel-runtime": "^6.26.0",    "clean-webpack-plugin": "^0.1.19",    "html-webpack-plugin": "^3.2.0",    "react": "^16.3.2",    "react-dom": "^16.3.2",    "webpack": "^4.6.0",    "webpack-cli": "^2.0.13",    "webpack-md5-hash": "0.0.6"  }}

Теперь вы можете скачать свои модули узла:

npm i

и добавить src/ папку к вашему проекту с index.html и index.js

Первый в src/index.html:

<html>  <head>  </head>  <body>    <div id="app"></div>    <script src=" htmlWebpackPlugin.files.chunks.main.entry %>"></script>  </body></html>

а затем в src/index.js:

console.log("hello, world");

Запустим скрипт разработчика:

npm run dev

Вот и все: собрано! Теперь давайте также настроим React для него.

Настройка вашего проекта React

Поскольку React использует специальный синтаксис под названием JSX, нам нужно транспилировать наш код. Если мы зайдем на веб-сайт babel, он имеет предварительные настройки для React.

npm install --save-dev babel-cli babel-preset-react

Наши .babelrc файл должен выглядеть так:

{  "presets": ["env", "react"]}

Добавьте инициализацию программы в свой index.js:

import React from 'react';import { render } from 'react-dom';
class App extends React.Component {
render() {    return (      <div>        'Hello world!'      </div>    );  }}
render(<App />, document.getElementById('app'));

и запустите скрипт разработчика:

npm run dev

Если вам удалось создать a ./dist папка из index.html и основной файл с хэшем, ты отлично справился! Мы собираем наше приложение!

Настройка web-dev-сервера

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

Как они отмечают на официальной странице документации:

Используйте веб-пакет с сервером разработки, который обеспечивает перезагрузку в реальном времени. Это следует использовать только для развития.

Вот где это может немного запутаться: Как сделать так, чтобы webpack-dev-server работал только в режиме разработчика?

npm i webpack-dev-server --save-dev

в вашем package.jsonнастроить

"scripts": {  "dev": "webpack-dev-server --mode development --open",  "build": "webpack --mode production"}

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

Ваш package.json сейчас выглядит так:

{ “name”: “post”, “version”: “1.0.0”, “description”: “”, “main”: “index.js”, “scripts”: {   "dev": "webpack-dev-server --mode development --open",   "build": "webpack --mode production" }, “author”: “”, “license”: “ISC”, “devDependencies”: {   “babel-cli”: “6.26.0”,   “babel-core”: “6.26.0”,   “babel-loader”: “7.1.4”,   “babel-preset-env”: “1.6.1”,   “babel-preset-react”: “6.24.1”,   “babel-runtime”: “6.26.0”,   “clean-webpack-plugin”: “0.1.19”,   “html-webpack-plugin”: “3.2.0”,   “react”: “16.3.2”,   “react-dom”: “16.3.2”,   “webpack”: “4.6.0”,   “webpack-cli”: “2.0.13”,   “webpack-dev-server”: “3.1.3”,   “webpack-md5-hash”: “0.0.6” }}

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

d-pNaItP95QgGseyYPF4vnf59hE6ZzN3dEhw

Далее вам нужно скачать React devtools в качестве расширения Chrome.

xvAiMTS9dt3ldDHDTZpttKKA4VocFOA5k35I

Таким образом вы можете намного проще налаживать свое приложение с консоли Chrome.

Конфигурация ESLint

Зачем нам это нужно? Ну, как правило, нам не нужно этим воспользоваться. Но ESLint – это удобный инструмент. В нашем случае он отобразит наш код (в редакторе и терминале, а также в браузере) и выделит наши ошибки, опечатки и ошибки, если таковые имеются. Это называется ворсинка.

ESLint – это утилита JavaScript с открытым исходным кодом, первоначально созданная Николасом С. Закасом в июне 2013 года. Есть альтернативы ей, но пока она отлично работает с ES6 и React, находит общие проблемы и интегрируется с другими частями экосистемы.

Пока давайте установим его локально для нашего нового проекта. Конечно, ESLint на данный момент имеет большое количество настроек. Детальнее о них можно прочитать на официальном сайте.

npm install eslint --save-dev
./node_modules/.bin/eslint --init

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

jqwXQg5EbMzBcHH5Ay2h5J-A7D4dvWXcH6MG

В этом уроке я выбрал первое: ответы на вопросы. Вот мои ответы:

4z0Do2YSSauRT3AE4mJMpJXkGUVrfqEoef15

Это добавит .eslintrc.js файл в каталог вашего проекта. Мой сгенерированный файл выглядит так:

module.exports = {    "env": {        "browser": true,        "commonjs": true,        "es6": true    },    "extends": "eslint:recommended",    "parserOptions": {        "ecmaFeatures": {            "experimentalObjectRestSpread": true,            "jsx": true        },        "sourceType": "module"    },    "plugins": [        "react"    ],    "rules": {        "indent": [            "error",            4        ],        "linebreak-style": [            "error",            "unix"        ],        "quotes": [            "error",            "single"        ],        "semi": [            "error",            "always"        ]    }};

Пока ничего не происходит. Хотя это вполне действительная конфигурация, этого недостаточно — мы должны интегрировать его с Webpack и нашим текстовым редактором, чтобы он работал. Как я уже упоминал, мы можем иметь его в редакторе кода, терминале (как линтер) или как крючок предварительной фиксации. Мы настроим его для нашего редактора.

Настройка кода Visual Studio

Если вам интересно, ESLint имеет плагин почти для каждого крупного редактора кода, в том числе Visual Studio Code, Visual Studio, SublimeText, Atom, WebStorm и даже Vim. Загрузите версию для текстового редактора. Я буду использовать VS Code в этой демонстрации.

4WU65-eeeoKswMvDEoS1Sxt8k57aCQ8Xik15

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

cpz3JPvXphCHG7q28iT0d8JgDQ0j6W4W5xvj

Вы можете настроить его вручную, проверив сообщение об ошибке или вы можете воспользоваться им и просто нажать «Сохранить», и он автоматически исправит.

4RkUDknKdYAVnRAC6EWBm0ej7XXMp2nVj1TY

Теперь вы можете перейти и настроить параметры ESLint:

module.exports = {    "env": {        "browser": true,        "commonjs": true,        "es6": true    },    "extends": ["eslint:recommended", "plugin:react/recommended"],    "parserOptions": {        "ecmaFeatures": {            "experimentalObjectRestSpread": true,            "jsx": true        },        "sourceType": "module"    },    "plugins": [        "react"    ],    "rules": {        "indent": [            "error",            2        ],        "linebreak-style": [            "error",            "unix"        ],        "quotes": [            "warn",            "single"        ],        "semi": [            "error",            "always"        ]    }};

Это не нарушит сборку, если вы ошибочно включили двойные кавычки вместо одинарных. Он также добавит некоторые проверки для JSX.

Добавить Красивее

z0E8DoSQUWzpFCR7d5doOsaKYsWnPsl2KvTp

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

fXTBqX11LT895GhaapTmE8rylLpcmGAGmnGI
Я установлю его в свой код VS здесь

После установки вы можете попробовать перепроверить код. Если мы напишем какое-то странное отступление и нажмем сохранить, оно должно автоматически отформатировать код сейчас.

iqk2-ROG6uExr-DzS4qculgcmJySHCUBNs6k

Этого еще мало. Чтобы ESLint работал синхронизированно и не разглашал дважды одинаковые ошибки или даже не имел конфликтов правил, вам нужно интегрировать его со своим ESLint.

npm i --save-dev prettier eslint-plugin-prettier

В официальных документах они рекомендуют использовать yarn, но пока подойдет npm. Твоему .eslintrc.json добавить файл:

...  sourceType: "module"},plugins: ["react", "prettier"],extends: ["eslint:recommended", "plugin:react/recommended"],rules: {  indent: ["error", 2],  "linebreak-style": ["error", "unix"],  quotes: ["warn", "single"],  semi: ["error", "always"],  "prettier/prettier": "error"}...

Теперь мы хотим расширить наши правила ESLint, чтобы включить лучшие правила:

npm i --save-dev eslint-config-prettier

и добавьте некоторые расширения к конфигурации eslint:

...extends: [  "eslint:recommended",  "plugin:react/recommended",  "prettier",  "plugin:prettier/recommended"]...
yJwhMkcxckkojkR4zFcLCtYSkUZTC6R6yjDI

Добавим к нему еще несколько конфигураций. Вы должны сделать это, чтобы избежать несоответствия между правилами Prettier по умолчанию и вашими правилами ESLint, как то, которое я имею сейчас:

65ROjVeRyoZJZseJhXSsNYAqAklzJNO69Bzc

Prettier заимствует формат переопределения ESLint. Это позволяет применять конфигурацию к определенным файлам.

Теперь можно создать для него файл конфигурации в виде a .js файл.

nano prettier.config.js

Теперь вставьте в этот файл:

module.exports = {  printWidth: 80,  tabWidth: 2,  semi: true,  singleQuote: true,  bracketSpacing: true};
zpZDUaO29kqcucuV8sPL5nJSyg7IAq1UXUTF

Теперь, когда вы нажимаете сохранить, вы видите, что код автоматически форматируется. Разве так не красивее? Каламбур очень задумчив.

Мой package.json выглядит так:

{ "name": "post", "version": "1.0.0", "description": "", "main": "index.js", "scripts": {  "build": "webpack --mode production",  "dev": "webpack-dev-server --mode development --open" }, "author": "", "license": "ISC", "devDependencies": {  "babel-cli": "^6.26.0",  "babel-core": "^6.26.0",  "babel-loader": "^7.1.4",  "babel-preset-env": "^1.6.1",  "babel-preset-react": "^6.24.1",  "babel-runtime": "^6.26.0",  "clean-webpack-plugin": "^0.1.19",  "eslint": "^4.19.1",  "eslint-config-prettier": "^2.9.0",  "eslint-plugin-prettier": "^2.6.0",  "eslint-plugin-react": "^7.7.0",  "html-webpack-plugin": "^3.2.0",  "prettier": "^1.12.1",  "react": "^16.3.2",  "react-dom": "^16.3.2",  "webpack": "^4.6.0",  "webpack-cli": "^2.0.13",  "webpack-dev-server": "^3.1.4",  "webpack-md5-hash": "0.0.6" }}

Теперь, когда мы все настроили, давайте быстро подытожим: ESLint наблюдает за вашим кодом на наличие ошибок, а Prettier – это инструмент форматирования стилей. ESLint имеет много других способов ловить ошибки, в то время как Prettier хорошо форматирует ваш код.

// webpack v4const path = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');const WebpackMd5Hash = require('webpack-md5-hash');const CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {  entry: { main: './src/index.js' },  output: {    path: path.resolve(__dirname, 'dist'),    filename: '[name].[chunkhash].js'  },  module: {    rules: [      {        test: /\.js$/,        exclude: /node_modules/,        use: {          loader: "babel-loader"        }      }    ]  },  plugins: [     new CleanWebpackPlugin('dist', {} ),    new HtmlWebpackPlugin({      inject: false,      hash: true,      template: './src/index.html',      filename: 'index.html'    }),    new WebpackMd5Hash()  ]};

Проблема: Prettier автоматически не форматирует код в Visual Studio Code

Несколько человек отметили, что VS Code не работает с Prettier.

Если ваш плагин Prettier не форматирует код автоматически при сохранении, вы можете исправить это, добавив этот код к настройкам VS Code:

"[javascript]": {    "editor.formatOnSave": true  }

как описано здесь.

Добавление загрузчика ESLint к конвейеру.

Поскольку ESLint сконфигурирован в проекте, он также будет жаловаться в вашем терминале после запуска сервера разработчика.

qC75GumM19s12yF560UnLoZxe9rQ7SeUXQEx

Примечание: Хотя это возможно сделать, на данный момент я не рекомендую использовать ESLint в качестве загрузчика. Это нарушит настройки исходной карты, о чем я подробнее описал в моей предыдущей статье. Как решить проблемы Webpack. Практический кейс. Я покажу, как это настроить здесь, если ребята уже исправили баг, который у них был.

Webpack имеет свой загрузчик ESLint.

npm install eslint-loader --save-dev

Вы должны добавить ESLint к правилам. При использовании с перегрузчиками (например babel-loader), убедитесь, что они расположены в правильном порядке (снизу вверх). В противном случае файлы будут проверены после обработки babel-loader

...module: {  rules: [    {      test: /\.js$/,      exclude: /node_modules/,      use: [{ loader: "babel-loader" }, { loader: "eslint-loader" }]    }  ]},...
D71Nvppu6zikxFMGUd6zlfyrHnljsJUe36nb

Вот некоторые возможные проблемы, которые могут возникнуть:

  • добавить неиспользованную переменную в ваш индексный файл
ci5uN3rhDzJlXhM4Y9iHShgeInPidFNrnDu3

Если вы натолкнетесь на эту ошибку (no-unused-vars), она достаточно хорошо описана в этом выпуске на GitHub и здесь.

Мы можем решить эту проблему, добавив некоторые правила, объясняемые здесь и здесь.

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

Подробнее об этой настройке можно прочитать здесь и здесь.

...semi: ['error', 'always'],'no-unused-vars': [  'warn',  { vars: 'all', args: 'none', ignoreRestSiblings: false }],'prettier/prettier': 'error'}...

Таким образом, мы получим достаточно сообщения об ошибках и предупреждениях.

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

Крючок предварительной фиксации

Люди обычно очень осторожны, когда речь идет об использовании инструментов Git. Но уверяю вас, это очень просто и понятно. Хуки предварительной фиксации из Prettier используются для того, чтобы команды имели последовательный стиль кодовой базы для каждого файла проекта, и никто не мог зафиксировать код. Настройте интеграцию Git для своего проекта так:

git initgit add .nano .gitignore (add your node_modules there)git commit -m "First commit"git remote add origin your origingit push -u origin master

Вот несколько замечательных статей о хуках git и использования Prettier.

Для людей, которые говорят, что вы можете делать это локально — нет, это неправда!

Вы можете сделать это с помощью инструмента lint-stage из этого репозитория Андрея Оконетчникова.

Добавление противопов

Давайте создадим новый компонент в нашем приложении. Пока наша index.js выглядит так:

import React from 'react';import { render } from 'react-dom';
class App extends React.Component {  render() {    return <div>Hello</div>;  }}render(<App />, document.getElementById('app'));

Мы создадим новый компонент под названием Hello.js для демонстрационных целей.

import React from 'react';class Hello extends React.Component {  render() {    return <div>{this.props.hello}</div>;  }}export default Hello;

Теперь импортируйте его в свой index.js файл:

import React from 'react';import { render } from 'react-dom';import Hello from './Hello';class App extends React.Component {  render() {    return (      <div>      <Hello hello={'Hello, world! And the people of the world!'} />     </div>   );  }}render(<App />, document.getElementById('app'));

Мы должны были увидеть элемент, но ESLint жалуется:

wlBU1cD2o9NHRzZGQaF3hrtgD-04Vh3XMvDG

Ошибка: [eslint] «hello» отсутствует в проверке props (react/prop-types)

В React v16 обязательно добавлять типы prop, чтобы избежать путаницы типов. Детальнее об этом можно прочитать здесь.

import React from 'react';import PropTypes from 'prop-types';class Hello extends React.Component {  render() {    return <div>{this.props.hello}</div>;  }}Hello.propTypes = {  hello: PropTypes.string};export default Hello;
mL3rIeJQSVAMX9tJdJHff-fMT2NQiFm3IL8W

Горячая замена модуля

Теперь, когда вы проверили свой код, пора добавить больше компонентов в вашу программу React. Пока у вас только два, но в большинстве случаев у вас есть десятки.

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

Давайте добавим горячую замену модуля, или HMR. В документации это описано следующим образом:

Hot Module Replacement (HMR) заменяет, добавляет или удаляет модули во время работы программы без полной перезагрузки. Это может значительно ускорить развитие несколькими способами:

Сохранять состояние программы, которое потеряно при полной перезагрузке.

Экономьте драгоценное время на разработку, обновляя только то, что было изменено.

Скорее изменяйте стили – почти по сравнению с изменением стилей в настройщике браузера.

Я не вдаюсь в технические особенности того, как это работает: это будет тема отдельной публикации. Но вот как это настроить:

...выход: { путь: путь.resolve(__dirname, 'dist'), имя файла: '[name].[chunkhash].js'},devServer: { contentBase: './dist', hot: true},module: { rules: [...

Solving small issues with HMR

0HqMo1Jp2CVMIvzcIkm2fBtG45IYABKaVHAE

We had to replace chunkhash with hash, because evidently webpack has fixed that issue since the last time. Now we have hot module replacement working!

...module.exports = {   entry: { main: './src/index.js' },   output: {     path: path.resolve(__dirname, 'dist'),     filename: '[name].[hash].js' }, devServer: { contentBase: './dist',...

Решение ошибок

Если мы запустим скрипт разработчика здесь:

az0baD-dHQtpAHDWDUaWlbviGXQ4N22RTTG8

затем воспользуйтесь советами по этой проблеме, чтобы решить ее.

Далее добавьте – горячий флажок к сценарию разработчика package.json:

..."scripts": {   "build": "webpack --mode production",   "dev": "webpack-dev-server --hot"}...

Выходные карты:

Как я упоминал выше, исходные карты не будут работать вместе с загрузчиком ESLint. Я подал здесь вопрос.

Обычно вы не хотите, чтобы они были в вашем проекте (поскольку вы хотите наладить свой проект с помощью сообщений об ошибках ESLint). Они также известны тем, что делают HMR более медленным.

Детальнее об этом можно прочитать здесь и здесь.

QUFF4U8Vt7PdTJWSqq04-W5psU5NlOxl5UeS

Но если вам все равно нужны исходные карты, самый простой способ добавить их с помощью параметра devtools.

...module.exports = {  entry: { main: './src/index.js' },  output: {    path: path.resolve(__dirname, 'dist'),    filename: '[name].[hash].js'  },  devtool: 'inline-source-map',  devServer: {    contentBase: './dist',    hot: true  },  ...

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

Если мы сейчас пойдем и создадим ошибку в нашем коде, она отобразится на консоли и укажет нам в нужное место:

wXVCuAbBa8BcSY6jrZGSCa6HwOFW0I9hUZM8

…или так мы думали. Но нет:

tCFjvqd9RKbsqtS2XkXqNp0rX0i9TeHjlpTI
Это неправильное поведение

Вам нужно изменить переменную среды следующим образом:

..."main": "index.js","scripts": {  "build": "webpack --mode=production",  "start": "NODE_ENV=development webpack-dev-server --mode=development --hot"},"author": ""...

webpack.config.js

...devtool: 'inline-source-map',devServer: {  contentBase: './dist',  open: true}...

Теперь это работает!

Jf8CqfuPZHFJEop3n61YRBRhBFgrzG07TdSb
Как видите, мы указываем точный файл, где произошла ошибка!

Теперь вы успешно настроили среду разработки для вашего проекта!

Давайте подытожим:

  • Устанавливаем webpack
  • Мы создали наш первый компонент React
  • Мы включили ESLint, чтобы проверить код ошибок
  • Мы настроили горячую замену модуля
  • Мы (возможно) добавили исходные карты

Примечание: поскольку многие зависимости npm могут измениться до момента, когда вы прочтете это, та же конфигурация может не работать для вас. Прошу оставить свои ошибки в комментариях ниже, чтобы я мог отредактировать их позже.

Пожалуйста, подпишитесь и хлопайте на эту статью! Спасибо!

Больше материалов:

SurviveJS — Webpack
После нескольких недель не удалось настроить webpack, я наткнулся на книгу SurviveJS, ища еще одно руководство…survivejs.comРуководство для начинающих с Webpack 4 и комплектование модулей — SitePoint
Webpack – это пакет модулей. Его основная цель — объединять JavaScript для использования в браузере, но он также…www.sitepoint.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *