Автор оригинала: FreeCodeCamp Community Member.
Маргаритой Образцовой
В реальном мире разработки мы должны очень быстро добавлять новые функции. В этом руководстве я покажу вам все, что вы можете сделать, чтобы оптимизировать этот процесс и достигать 120% от вашей скорости Dev.
Почему , вы можете спросить?
Поскольку выполнение ручной работы чрезвычайно производительно, когда речь идет о программировании. Мы хотим автоматизировать как можно больше. Поэтому я покажу вам, какие части процесса разработки с реагированием мы можем настроить с помощью 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 :
а потом в SRC/index.js :
console.log("hello, world");Давайте запустим скрипт Dev:
npm run dev
Там у вас есть: он скомпилирован! Теперь давайте настроим реакцию для него тоже.
Настройка вашего реагирования
Поскольку реакцию использует специальный синтаксис под названием JSX, нам нужно транспортировать наш код. Если мы пойдем в сайт Вавила, у него есть Предустановленная для реагирования Отказ
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 ( 'Hello world!' ); }}render(, document.getElementById('app'));
и запустить скрипт Dev:
npm run dev
Если вам удалось сгенерировать ./dist папка с index.html и основной файл с хеш, Вы сделали отлично! У нас есть наше приложение, компилирующее!
Настройка Web-Dev-Server
Технически, мы не должны делать это, поскольку там есть много серверов узлов для интерфейсных приложений. Но я рекомендую WebPack-Dev-Server Потому что он предназначен для работы с WebPack, и он поддерживает кучу приятных функций, таких как Замена горячего модуля , Исходные карты, и так на Отказ
Как говоря уже в Официальная страница документации :
Вот где он может стать немного запутанным: Как вы делаете WebPack-Dev-сервер работать только для разработки Dev?
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" }}Теперь, если вы попытаетесь изменять что-то в своем приложении, браузер должен автоматически обновлять страницу.
Далее необходимо скачать RACT DEVTOOLS в виде расширения Chrome.
Таким образом, вы можете отладить свое приложение из консоли Chrome намного легче.
Конфигурация ESLINT
Зачем нам это нужно? Ну, как правило, нам не нужно его использовать. Но Eslint это удобный инструмент. В нашем случае он будет представлять наш код (в редакторе и терминале, а на браузере) и выделить наши ошибки, опечатки и ошибки, если у нас есть какие-либо. Это называется Рятинг Отказ
ESLINT – это подвижная утилита JavaScript с открытым исходным кодом, изначально созданная Николасом С. Закасом в июне 2013 года. Есть ли ему альтернативы, но до сих пор она отлично работает с ES6 и реагирует, находит общие проблемы и интегрирует с другими частями экосистемы.
На данный момент давайте установим его локально для нашего нового проекта. Конечно, Eslint в этот момент имеет большое количество настроек. Вы можете прочитать больше о них На официальном сайте Отказ
npm install eslint --save-dev
./node_modules/.bin/eslint --init
Последняя команда создаст файл конфигурации. Вам будет предложено выбрать один из трех вариантов:
В этом руководстве я выбрал первый: ответы на вопросы. Вот мои ответы:
Это добавит .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 и нашим текстовым редактором для его работы. Как я уже упоминал, мы можем иметь его в редакторе кода, терминал (как Linter) или как преобладающий крючок. Мы настроим это для нашего редактора на данный момент.
Настройка для визуального студийного кода
Если вы задаетесь вопросом, Eslint имеет плагин практически для каждого основного редактора кода, включая Visual Studio Code, Visual Studio, SUBLIMETEXT , Atom, Webstorm и даже Vim. Так что идите и скачайте версию для Ваш собственный текстовый редактор Отказ Я буду пользоваться VS код в этой демонстрации.
Теперь мы можем увидеть некоторые ошибки кода. Это связано с тем, что в проекте есть файл конфигурации, который связывает код и жалуется, когда некоторые правила не подчиняются.
Вы можете отладить его вручную, проверив сообщение об ошибке, или вы можете воспользоваться этим и просто нажмите Сохранить, и он автоматически исправит вещи.
Теперь вы можете пойти и настроить настройки 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.
Добавить красивее
Reettier является одним из самых популярных форматиров в наши дни, и это хорошо принято кодирующим сообществом. Его можно добавить в Eslint, Ваш редактор , а также установлен как предварительный коммит крюк.
Как только вы устанавливаете его, вы можете попробовать проверить свой код еще раз. Если мы пишем из странных отступов и нажмите Сохранить, он должен автоматически отформатировать код сейчас.
Это еще недостаточно. Для того, чтобы ESLINT на работу синхронизировать и не излучает те же ошибки дважды, или даже иметь конфликты правил, вы Нужно интегрировать это с вашим Eslint.
npm i --save-dev prettier eslint-plugin-prettier
В официальных документах они рекомендуют использовать пряжу, но 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"]...
Давайте добавим еще конфигурации к этому. Вы должны сделать это, чтобы избежать несоответствий между правилами более красивых правил по умолчанию и ваши правила Eslint, например, у меня есть:
Красивее заимствуют эсвет Определить формат Отказ Это позволяет вам применить конфигурацию к определенным файлам.
Теперь вы можете создать файл конфигурации для него в форме .js файл.
nano prettier.config.js
Теперь вставьте в этот файл:
module.exports = { printWidth: 80, tabWidth: 2, semi: true, singleQuote: true, bracketSpacing: true};Теперь, когда вы нажимаете сохранение, вы видите, что ваш код автоматически отформатирован. Разве это не красивее? Каламбур очень много намеревалось.
Мой 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 наблюдает за вашим кодом на ошибки, а Crackier – это средство форматирования стиля. Eslint имеет много способов ловить ошибки, пока красивее приятно форматировать ваш код.
// 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() ]};Выпуск: Reettier не автоматически формат код в визуальном студийном коде
Несколько человек указывали, что VS-код не работает с красивее.
Если ваш привлекательный плагин не отформатирует код автоматически в сохранении, вы закрепите его, добавив этот код в настройки кода VS:
"[javascript]": { "editor.formatOnSave": true }Как описано здесь Отказ
Добавление погрузчика ESLINT на ваш трубопровод
Поскольку ESLINT настроен в проекте, он также будет жаловаться в ваш терминал после запуска Dev Server.
У WebPack есть свой Eslint Loader Отказ
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" }] } ]},...Вот некоторые возможные проблемы, которые у вас могут быть:
- Добавьте неиспользуемую переменную в свой файл индекса
Если вы наткнулись на эту ошибку (No-unied-vars), это довольно хорошо объяснено в этот вопрос на Github и здесь Отказ
Мы можем решить эту проблему, добавив некоторые правила, объяснил здесь и здесь Отказ
Как вы могли заметить, вы получаете Нет-неиспользованные-варики ошибка здесь. Вам нужно сделать его предупреждением, а не ошибкой, потому что таким образом это легче делать быстрое развитие. Вам необходимо добавить новое правило на свой ESLINT, чтобы вы не получили ошибку по умолчанию.
Вы можете прочитать об этой установке больше здесь и здесь Отказ
...semi: ['error', 'always'],'no-unused-vars': [ 'warn', { vars: 'all', args: 'none', ignoreRestSiblings: false }],'prettier/prettier': 'error'}...Таким образом, мы получим довольно ошибки и предупреждающие сообщения.
Мне нравится идея иметь функцию автоматической фиксации, но давайте быть понятным: я не самый большой поклонник, имея вещи волшебным образом измениться. Чтобы избежать этой ситуации, мы сможем совершить Autofix на данный момент.
Предварительно совершить крючок
Люди обычно очень осторожны, когда речь идет об использовании GIT Tools. Но я уверяю вас, это очень легко и просто. Pre Compary Clubs с красивее используются, чтобы команды имели последовательный стиль кодовой базы в каждом файле проекта, и никто не может совершить нестандартный код. Настройка Git Integration для вашего проекта, как это:
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
Вот несколько отличных статей на Гитские крючки и используя красивее Отказ
Для людей, которые говорят, что вы можете сделать только это локально – нет, это не так!
Вы можете сделать это, используя инструмент Lint-Stage из это Репозиторий по Андрей Окончников Отказ
Добавление пропорций
Давайте создадим новый компонент в нашем приложении. Пока наша index.js Похоже, это выглядит:
import React from 'react';import { render } from 'react-dom';class App extends React.Component { render() { return Hello; }}render(Мы создадим новый компонент под названием Hello.js для демонстрационных целей.
import React from 'react';class Hello extends React.Component { render() { return {this.props.hello}; }}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 ( Мы должны были увидеть элемент, но Eslint жалуется:
Ошибка: [ESLINT] «HELLO» отсутствует в проверке реквизита (React/Spr-типы)
В RACT V16 обязательно добавить Типы опоры Во избежание путаницы. Вы можете прочитать больше об этом здесь Отказ
import React from 'react';import PropTypes from 'prop-types';class Hello extends React.Component { render() { return {this.props.hello}; }}Hello.propTypes = { hello: PropTypes.string};export default Hello;Замена горячего модуля
Теперь, когда у вас есть проверяемый код, пришло время добавить больше компонентов в свое приложение React. Пока у вас есть только два, но в большинстве случаев у вас есть десятки.
Конечно, перекомпиляция всего приложения на обновлении каждый раз, когда вы меняете что-то в своем проекте, не является вариантом. Вам нужен более быстрый способ сделать это.
Так что давайте добавим замену горячего модуля, ака HMR. В Документация он описывается как:
Я не собираюсь в технические данные о том, как он работает здесь: это будет предметом отдельного поста. Но вот как это настроить:
...output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[chunkhash].js'},devServer: { contentBase: './dist', hot: true},module: { rules: [...Решение небольших проблем с HMR
Нам пришлось заменить Chunkhash с хэшем, потому что, очевидно, WebPack исправил эту проблему с прошлого года. Теперь у нас есть замена горячего модуля!
...module.exports = { entry: { main: './src/index.js' }, output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[hash].js' }, devServer: { contentBase: './dist',...Решение ошибок
Если мы запустим скрипт разработки здесь:
Тогда используйте советы от этот вопрос починить это.
Далее добавьте – горячий флаг к скрипту Dev Package.json :
..."scripts": { "build": "webpack --mode production", "dev": "webpack-dev-server --hot"}...Исходные карты:
Как я уже упоминал выше, Исходные карты не будут работать вместе с помощью погрузчика ESLINT. Я подал проблему здесь Отказ
Вы можете прочитать об этом больше здесь и здесь Отказ
Но если вы хотите исходные карты в любом случае, самый простой способ добавить их через 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 }, ...Примечание. Исходные карты не будут работать, пока вы не укажете среду правильно. Вы можете прочитать о моем процессе отладки здесь Отказ Ниже я предоставим вам спойлер и объяснение того, как я решил этот вопрос.
Если теперь мы идем и создаем ошибку в нашем коде, это будет отображаться в консоли и укажет нас в правильное место:
… Или так мы думали. Но нет:
Вам нужно изменить переменную среды, как это:
..."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}...Теперь это работает!
Теперь вы успешно настроили среду разработки для вашего проекта!
Давайте повторим:
- Мы настроили WebPack
- Мы создали наш первый комментарий реагирования
- Мы включили Eslint, чтобы проверить код для ошибок
- Мы устанавливаем замену горячего модуля
- Мы (возможно) добавлены исходные карты
Примечание : Поскольку многие зависимости NPM могут измениться к тому времени, когда вы прочитаете это, тот же конфигурация не может работать для вас. Я прошу вас оставить ваши ошибки в комментариях ниже, чтобы я мог редактировать его позже.
Пожалуйста, подпишитесь и хлопайте для этой статьи! Спасибо!
Больше материалов:
Survivejs – WebPack После недель не удалось настроить WebPack, я наткнулся на книгу «Выжилье», ищете еще один учебник … sexivejs.com Руководство для начинающих к WebPack 4 и модуль в пакете – SitePoint WebPack – это модуль Bundler. Его основной целью – подключить файлы JavaScript для использования в браузере, но это также … www.sitepoint.com.