Эти инструменты помогут вам написать чистый код

Автор оригинала: Adeel Imran.

Взгляд на красивее, эсвет, хаски, поставленные с линтами и редактором

Учимся писать хороший код, но вы не знаете, куда начать … Проходя через стиль, как Руководство по стилю Airbnb’s JavaScript … пытаясь написать код с лучшими практиками …

Удаление мертвого кода? Нахождение неиспользуемых переменных в базе кода? Пытаясь найти проблемные шаблоны в вашем коде? Вроде, делает это Возвращение или не?

Любой из этого звука знаком?

С таким большим количеством учиться и делать все одновременно, это так беспокойно.

Вы команда ведут управляющую командой? У вас есть новые разработчики в команде? Вы беспокоитесь о том, что они напишет код не до стандартов? Принимает ли все свой день в отзывах кода, где обзор больше по стандартам кода, а затем фактическая реализация логики?

Я был там и сделал это, и это так утомляет и беспокойный.

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

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

В этом руководстве укрепится больше к приложениям React Applications, но то же самое можно применять на любом веб-проекте.

Также редактор, который я использую для этого учебника, это VS код . Это от Microsoft И когда они были в открытом исходном котеле, я был в ❤ с этой компанией (хотя было время, когда я не был).

Повестка дня

Красивее
Eslint.
Автоматизатор формата и линта на сохранении
Хаски
Постановка
С хрипкой и сочетанием
Reductsconfig.

Давайте начнем с красивее

Что такое красивее?

Прекраснее является самоуверенным кодом. IT-форматы кода для вас определенным образом.

Этот GIF в значительной степени объясняет это:

Зачем нам это нужно?

Очищает существующую базу кода : в одной командной строке. Представьте себе очистку кодовой базы с более чем 20 000 строк кода.
Легко принять : Reettier использует наименьший спорный стиль кодирования во время форматирования вашего кода. Поскольку он является открытым исходным кодом, многие люди работали над несколькими итерациями его в фиксации некоторых корпусов и полируют опыт.
Запись кода : Что люди не понимают, так это то, что они проводят много времени форматирования кода и тратить их умственную энергию. Пусть красивее обрабатывает это, пока Вы Сосредоточиться на основной бизнес-логике. На личной заметке преток увеличил свою эффективность на 10%.
Помогая новичкам разработчиков : Если вы новый разработчик работает рядом с отличными инженерами, и вы хотите посмотреть круто Написание чистого кода, будь умным! Используйте красивее.

Как мне это настроить?

Создайте папку под названием приложение И внутри этого типа папки в командной строке:

npm init -y

Это создаст Package.json Файл для вас внутри приложение папка.

Теперь я собираюсь использовать пряжа На протяжении всего этого учебника, но вы можете использовать NPM также.

Давайте установим нашу первую зависимость:

yarn add --dev prettier

Это установит зависимость Dev в вашем Package.json который будет выглядеть так:

{
  "name": "react-boiler-plate",
  "version": "1.0.0",
  "description": "A react boiler plate",
  "main": "src/index.js",
  "author": "Adeel Imran",
  "license": "MIT",
  "scripts": {
    "prettier": "prettier --write src/**/*.js"
  },
  "devDependencies": {
    "prettier": "^1.14.3"
  }
}

Я поговорю через секунду, что это "красивее": "красивее - напишите src/**/*. JS" делает, но сначала давайте создадим SRC/ папка внутри нашего приложение папка. И внутри SRC/ Папка Давайте создадим файл под названием index.js – Вы можете назвать это то, что вы хотите.

В index.js Файл, вставьте этот код как это:

let person =                     {
  name: "Yoda",
                designation: 'Jedi Master '
                };


              function trainJedi (jediWarrion) {
if (jediWarrion.name === 'Yoda') {
  console.log('No need! already trained');
}
console.log(`Training ${jediWarrion.name} complete`)
              }

trainJedi(person)
              trainJedi({ name: 'Adeel',
              designation: 'padawan' 
  });

Так что до сих пор у нас есть SRC/App/index.js Файл с некотором уродливым кодом, написанным в нем.

Есть 3 вещи, которые мы можем сделать с этим:

Отступ и отформатируйте этот код
Используйте автоматизированный инструмент
Пусть вещи пойдут и двигаются дальше (пожалуйста, не выбирайте эту опцию)

Я собираюсь пойти на второй вариант. Так что теперь у нас есть зависимость установлена и красивее сценарий, написанный в нашем Package.json Отказ

Давайте создадим Prettier.config.js Файл в нашем корне приложение папка, и добавьте некоторые красивые правила к нему:

module.exports = {
  printWidth: 100,
  singleQuote: true,
  trailingComma: 'all',
  bracketSpacing: true,
  jsxBracketSameLine: false,
  tabWidth: 2,
  semi: true,
};

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

однокатание Преобразует все ваши двойные цитаты в отдельные цитаты. Подробнее в Руководстве в стиле Airbnb JavaScript здесь Отказ Это руководство – мой PlayBook для написания хорошего кода и впечатляет моих коллег.

TrailingComma Убедитесь, что есть свисающая запятая в конце последнего свойства объекта. Ник Граф объясняет это таким крутым способом здесь Отказ

брекеты Печать пробелов между объективными литералами:

If bracketSpacing is true - Example: { foo: bar }If bracketSpacing is false - Example: {foo: bar}

jsxbracketsaMeline поставлю & GT; многострочного элемента JSX на последней строке:

// true example



// false example

Tabwidth Определяет количество пробелов на уровень вдавливания.

Полу Если правда будет печатать ; в конечных утверждениях.

Вот список всех Варианты что вы можете дать красивее.

Теперь, когда у нас есть настройка конфигурации, давайте поговорим об этом скрипте:

"prettier": "prettier  — write src/**/*.js"

В скрипте выше я бегу Прекраснее и рассказывать это, чтобы найти все .js Файлы в моем SRC/ папка. --write Флаг рассказывает Прекраснее Чтобы сохранить отформатированные файлы, как он проходит через каждый файл и находит любую аномалию в формировании кода.

Давайте запустим этот скрипт в вашем терминале:

yarn prettier

Это то, что происходит с моим кодом, когда я бегу:

Если вы застряли, не стесняйтесь взглянуть на репозиторий для этого.

Это в значительной степени заключает наши красивее обсуждение. Давайте поговорим о линтах.

Eslint.

Что такое код литера?

Почему нам нужно один для JavaScript?

Поскольку JavaScript динамичен, а свободно набран Язык , он склонен к ошибкам разработчика. Без преимущества процесса компиляции .js Файлы обычно выполняются для поиска синтаксиса или других ошибок.

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

Что делает Eslint так особенным?

Хороший вопрос! Все в Eslint является подключаемым. Вы можете добавить правила во время выполнения – правила и форматированные не должны быть включены в комплект. Каждое плавание льминации, которое вы добавляете, это стоять в одиночестве, любое правило может быть включено или выключено. Каждое правило может быть установлено на предупреждение или ошибку. Твой выбор.

Используя ESLINT, вы получаете полную настройку того, как вы хотите, чтобы ваш стиль посмотреть.

Сейчас на данный момент есть 2 популярных стиля гиды:

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

Этот стиль гида активно поддерживается – проверьте их Github repo. . Я буду использовать наборы правил, вдохновленные руководством стиля Airbnb на протяжении всего этого урока. Так что давайте начнем.

Давайте сначала обновим наше Package.json файл:

{
  "name": "react-boiler-plate",
  "version": "1.0.0",
  "description": "A react boiler plate",
  "main": "src/index.js",
  "author": "Adeel Imran",
  "license": "MIT",
  "scripts": {
    "lint": "eslint --debug src/",
    "lint:write": "eslint --debug src/ --fix",
    "prettier": "prettier --write src/**/*.js"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.(js|jsx)": ["npm run lint:write", "git add"]
  },
  "devDependencies": {
    "babel-eslint": "^8.2.3",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-config-jest-enzyme": "^6.0.2",
    "eslint-plugin-babel": "^5.1.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jest": "^21.18.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-prettier": "^2.6.0",
    "eslint-plugin-react": "^7.9.1",
    "husky": "^1.1.2",
    "lint-staged": "^7.3.0",
    "prettier": "^1.14.3"
  }
}

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

Babel-Eslint : Этот пакет позволяет использовать Lint на всех Бабел Хорошо легко. Вам не обязательно нужен этот плагин, если вы не используете Поток или экспериментальные особенности, которые еще не поддерживаются Eslint.

Eslint : Это основной инструмент, который необходим для расслаивания вашего кода.

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

eslint-plugin-babel : Eslint Plugin Companion к бабел-эсвет . Babel-Eslint делает отличную работу в адаптации Eslint для использования с бабелом.

Eslint-Plugin-Import : Этот плагин намерен поддерживать линт ES2015 + (ES6 +) Импорт/синтаксис экспорта, и предотвратить проблемы с ошибками спусковой обработки файлов и импортных имен. Читать дальше Отказ

eslint-plugin-jsx-a11y : Правила льмина на месте для правил доступности на элементах JSX. Потому что Доступность важна!

eslint-plugin-Breettier : Это помогает Eslint работать гладко с красивее. Таким образом, когда красивее кодируют форматы, он имеет в виду наши правила Eslint.

eslint-plugin-reac : Реагниааааааааааааааааааайнеры линтальных правил для Eslint.

Теперь этот учебник не много говорит о тестировании подразделения для Quest/Enzyme Отказ Но если вы используете его, давайте добавим для них правила льмина:

Eslint-Config-jest-erzyme : Это помогает с реактивными и ферментами специфическими переменными, которые глобализированы. Этот конфигурация Lint позволяет ESLINT узнать о тех глобальных и не предупреждать о них – как утверждения Это и Опишите Отказ

eslint-plugin-jest : Плагин Eslint для шума.

хаски : Больше на это позже, когда в разделе автоматизации.

Постановка: Больше на это позже, когда в разделе автоматизации.

Теперь, когда у нас есть базовое понимание, давайте начнем;

Создать .eslintrc.js файл в вашем корне приложение/ папка:

module.exports = {
	env: {
		es6: true,
		browser: true,
		node: true,
	},
	extends: ['airbnb', 'plugin:jest/recommended', 'jest-enzyme'],
	plugins: [
		'babel',
		'import',
		'jsx-a11y',
		'react',
		'prettier',
	],
	parser: 'babel-eslint',
	parserOptions: {
		ecmaVersion: 6,
		sourceType: 'module',
		ecmaFeatures: {
			jsx: true
		}
	},
	rules: {
		'linebreak-style': 'off', // Don't play nicely with Windows.

		'arrow-parens': 'off', // Incompatible with prettier
		'object-curly-newline': 'off', // Incompatible with prettier
		'no-mixed-operators': 'off', // Incompatible with prettier
		'arrow-body-style': 'off', // Not our taste?
		'function-paren-newline': 'off', // Incompatible with prettier
		'no-plusplus': 'off',
		'space-before-function-paren': 0, // Incompatible with prettier

		'max-len': ['error', 100, 2, { ignoreUrls: true, }], // airbnb is allowing some edge cases
		'no-console': 'error', // airbnb is using warn
		'no-alert': 'error', // airbnb is using warn

		'no-param-reassign': 'off', // Not our taste?
		"radix": "off", // parseInt, parseFloat radix turned off. Not my taste.

		'react/require-default-props': 'off', // airbnb use error
		'react/forbid-prop-types': 'off', // airbnb use error
		'react/jsx-filename-extension': ['error', { extensions: ['.js'] }], // airbnb is using .jsx

		'prefer-destructuring': 'off',

		'react/no-find-dom-node': 'off', // I don't know
		'react/no-did-mount-set-state': 'off',
		'react/no-unused-prop-types': 'off', // Is still buggy
		'react/jsx-one-expression-per-line': 'off',

		"jsx-a11y/anchor-is-valid": ["error", { "components": ["Link"], "specialLink": ["to"] }],
		"jsx-a11y/label-has-for": [2, {
			"required": {
				"every": ["id"]
			}
		}], // for nested label htmlFor error

		'prettier/prettier': ['error'],
	},
};

Также добавьте .eslintignore файл в вашем корне приложение/ Каталог:

/.git
/.vscode
node_modules

Давайте начнем с обсуждения того, что .eslintrc.js файл делает.

Давайте сломаемся:

module.exports = { 
   env:{}, 
   extends: {}, 
   plugin: {}, 
   parser: {}, 
   parserOptions: {}, 
   rules: {},
};

env: Окружающая среда определяет глобальные переменные, которые предопределены. Доступные среды – в нашем случае это ES6 , браузер и узел . ES6 Включит все функции ECMAScript 6, за исключением модулей (это автоматически устанавливает параметр « Ecmaversion » 6). браузер добавит все браузерные глобальные переменные, такие как Окна Отказ узел добавлю узловые глобальные переменные и узел Scoping, такие как глобальный Отказ Вы можете Читать дальше на указание сред.
Расширется: Массив строк – каждая дополнительная конфигурация расширяет предыдущие конфигурации. Прямо сейчас мы используем правила льмина от Airbnb которые распространяются на jest а затем продлен до jest-фермент Отказ
Плагины: Плагины в основном плагируют правила, которые мы хотим использовать. Прямо сейчас мы используем Бабел, импорт, jsx-a11y, реагировать, красивее , все из которых я объяснил выше.
Парсер: По умолчанию Eslint использует Espree , но так как мы используем варить нам нужно использовать Babel-Eslint Отказ
Parseroptions: Когда мы изменяем парсеров по умолчанию для Espree к бабел-эсвет нам нужно указать Парсероотпии – требуется. В вариантах я говорю Eslint, что Ecmaversion собирается на версию Lint 6 Отказ Так как мы пишем наш код в Ecmascript модуль а не Сценарий Мы указываем Sourcetype как модуль . Так как мы используем React, которые приводят в JSX, в ecmafeatures. Я передаю это вариант jsx и установить это на правда Отказ
Правила: Это часть, которую я люблю больше всего в Eslint, настроек. Все правила, которые мы расширили и добавили с нашими плагинами, мы можем изменить или переопределить. правила это место, где вы это делаете. Я уже вложил комментарии в велосипеде против каждого правила и для вашего понимания.

Теперь это очистилось, давайте поговорим о .eslintignore

.eslintignore принимает список дорожек, которые мы хотим Eslint, чтобы не войти. Здесь я указываю только три:

/.git Я не хочу, чтобы мои файлы, связанные с GIT.
/.vscode Поскольку я использую VS-код, этот редактор входит в свою собственную конфигурацию, которую вы можете установить для каждого проекта. Я не хочу, чтобы мои конфигурации были линтами. Я использую VS-код, потому что он легкий и открытый источник.
node_modules. Я не хочу, чтобы мои зависимости обманывались. Поэтому я добавил это в список.

Теперь, когда мы сделаем с этим Давайте поговорим о недавно добавленных скриптах к нашему Package.json.

"lint": "eslint --debug src/"
"lint:write": "eslint --debug src/ --fix"

$ пряжа линта Запустив эту команду, она пройдет все ваши файлы в SRC/ И даст вам подробный журнал в каждом файле, где он находит ошибки, которые вы можете затем выйти вручную и исправить их.

LING LIND: напишите Запуск команды он будет делать то же самое, что делает команду выше. Единственное дополнение заключается в том, что если он может исправить любую из ошибок, которые он видит, он исправит их и пытается удалить столько запаха кода из вашего кода, как это может.

Если вы застряли, не стесняйтесь взглянуть на Репозиторий для этого.

Это было немного беспокойнее, и если вы следили на данный момент:

Давайте автоматизируем немного больше

До сих пор у нас есть красивее и Eslint Настройка, но каждый раз, когда мы должны запустить скрипт. Давайте сделаем что-то об этом.

Формат и код линта на ударе Ctrl + S В вашем редакторе.
Каждый раз, когда вы совершаете свой код, автоматически выполните предварительную команду, чтобы соединить и форматировать свой код.

Формат и код Lint на сохранении

Для этого вам нужно использовать редактор, как VS код :

Установите плагин, называемый расширением ESLINT. Скачать здесь или нажмите Ctrl + Shift + X В вашем VS Code Editor. Это откроет модуль расширений. Там, тип поиска Eslint Отказ Появится список плагинов. Установите один by Dirk Baumer Отказ Как только это установлено, нажмите Перезагрузить Кнопка, чтобы перезапустить редактор.

Как только у вас установлен этот плагин, в корне приложение/ Папка создает папку под названием .vscode/ – (точка) важна в именем файле.

Внутри папки Создайте settings.json файл, как указано ниже:

{
  "editor.formatOnSave": false,
  "eslint.autoFixOnSave": true,
}

Редактор. Фрассформатс Я установил значение для ложь Здесь, поскольку я не хочу, чтобы конфигурацию редактора по умолчанию для формата файла конфликтуют с Eslint и красивее.
Eslint.autofixSave Я установил значение для правда Вот потому что я хочу, чтобы установленный плагин работал каждый раз, когда я ударил сохранение. Так как Eslint настроен с красивее Конфигурации, каждый раз, когда вы попадаете спасти Он будет отформатировать и пересекать ваш код.

Также важно отметить, что когда вы запускаете скрипт Пряжа Lint: Написать Сейчас это будет крутиться и приведет к тому, что ваш код на то же время.

Просто представьте, если вы попадаете в кодовую базу 20К строк кода для аудита и улучшения. Теперь представьте себе делать это вручную. Улучшение неизвестного кода. Теперь представьте себе делать это с одной командой. Ручной подход может занять 30 дней … Хотя автоматический подход займет вас 30 секунд.

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

Хаски

Что такое хаски?

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

Все, что вам нужно сделать, это установить хаски:

yarn add --dev husky

И в твоем Package.json Файл Добавить фрагмент:

"husky": {    
   "hooks": {      
     "pre-commit": "YOUR_COMMAND_HERE", 
     "pre-push": "YOUR_COMMAND_HERE"   
   }  
},

Поэтому каждый раз, когда вы совершаете или нажимаете, он выполнит определенный скрипт или команду, как файл пробега, или отформатируйте свой код.

Вы можете прочитать больше на Hasky здесь Отказ

Постановка

Что такое устроен с линтами?

Поставленные с линтами Помогает вам запустить Linters на поэтапных файлах, так что плохой код не отталкивается в вашу ветку.

Почему крутили?

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

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

Все, что вам нужно, это установить постановочный лист:

yarn add --dev lint-staged

Тогда в вашем Package.json Файл Добавить это:

"lint-staged": {    
   "*.(js|jsx)": ["npm run lint:write", "git add"]  
},

Что эта команда будет делать, – запускать lint: напиши Сначала команда, а затем добавьте ее в зону постановки. Это запускает эту команду только для .js & .jsx. Файлы, но вы можете сделать то же самое для других файлов, если хотите.

С хрипкой и сочетанием

Каждый раз, когда вы получаете свой код, прежде чем совершить свой код, он будет запустить сценарий под названием поставленные с линтами который будет работать NPM Run Lint: напишите Что будет личь и отформатировать ваш код – затем добавить его в зону постановки, а затем совершать. Круто справа?!

Ваш финал Package.json Файл должен выглядеть так. Это тот же фрагмент, который я поделился выше:

{
  "name": "react-boiler-plate",
  "version": "1.0.0",
  "description": "A react boiler plate",
  "main": "src/index.js",
  "author": "Adeel Imran",
  "license": "MIT",
  "scripts": {
    "lint": "eslint --debug src/",
    "lint:write": "eslint --debug src/ --fix",
    "prettier": "prettier --write src/**/*.js"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.(js|jsx)": ["npm run lint:write", "git add"]
  },
  "devDependencies": {
    "babel-eslint": "^8.2.3",
    "eslint": "^4.19.1",
    "eslint-config-airbnb": "^17.0.0",
    "eslint-config-jest-enzyme": "^6.0.2",
    "eslint-plugin-babel": "^5.1.0",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-jest": "^21.18.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-prettier": "^2.6.0",
    "eslint-plugin-react": "^7.9.1",
    "husky": "^1.1.2",
    "lint-staged": "^7.3.0",
    "prettier": "^1.14.3"
  }
}

Теперь каждый раз, когда вы делаете это:

$ git add .$ git commit -m "some descriptive message here"

Он будет сбрасывать и отформатировать ваш код на основе всех правил, поставленных в .eslintrc.js файл. С этим вы можете быть уверены, что плохой код не выталкивается на производство.

С помощью этого раздела заключено, у вас сейчас есть красивее , Eslint и хаски интегрирован в вашу кодовую базу.

Давайте поговорим об EditorConfig

Сначала создайте .editorconfig файл в вашем корне приложение/ Папка, и в этом файле вставьте код ниже:

# EditorConfig is awesome: http://EditorConfig.org

# top-most EditorConfig file
root = true

[*.md]
trim_trailing_whitespace = false

[*.js]
trim_trailing_whitespace = true

# Unix-style newlines with a newline ending every file
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
insert_final_newline = true
max_line_length = 100

Так что такое редакторConfig?

Таким образом, не все собираются использовать VS-код – и вы не можете принять его, и не следует. Для того, чтобы держать всех на одной странице с точки зрения того, что по умолчанию, например Вкладка пространство или линия заканчивается должно быть, мы используем .editorconfig. . Это на самом деле помогает обеспечить определение определенных наборов правил.

Вот список всех редакторов, которые поддерживают Remerconsfig Отказ Список редакторов включает в себя веб-шторм, код приложения, атом, Eclipse, Emacs, BBEDIT и многое другое.

Вышеуказанная конфигурация сделает следующее:

Отделка задних белых пробелов от .md & .js файлы
Установите стиль отступа в пространство вместо вкладка
Размер отступа к 2.
конец линии, чтобы быть LF Так что все, независимо от их ОС, имеет тот же конец линии. Читайте больше здесь Отказ
В конце файла должна быть новая строка
и максимальная длина линии должна быть 100 Чарс

Со всей этой конфигурацией и на месте вы готовы. Если вы хотите увидеть исходный код Вот это Отказ

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

Если вам понравилась моя статья, вы также должны проверить мою другую статью: Как объединить WebPack 4 и Babel 7, чтобы создать фантастическое приложение для реагирования В котором я говорю о настройке WebPack и Babel для реагирования.

Оригинал: “https://www.freecodecamp.org/news/these-tools-will-help-you-write-clean-code-da4b5401f68e/”