Webpack
Источник https://youtu.be/1Nk09Z4ca4A
1. Создаём файл .editorconfig, указываем правила.
В редакторе устанавливаем дополнение, список плагинов для разных редакторов есть на официальном сайте https://editorconfig.org/
После перезагрузки редактора установленный плагин будет все файлы форматировать по указанным в .editorconfig правилам.
2. В Git Bash выполняем команду npm init несколько раз нажимаем Enter. соглашаясь с настройками. В результате в папке появляется файл package.json, его можно редактировать.
3. Пакеты устанавливает команда npm install, сокращёно npm i
Например, eslint установит команда
npm install -D eslint eslint-config-airbnb-base
Ключ -D он же --save-dev означает, что файл используется в процессе разработки и не попадёт в конечный продукт.
4. Инициализируем eslint командой
npx eslint init
Для настройки предлагают использовать стрелки - Use arrow keys
если стрелки не работают, можно использовать цифру - пробел ентер
Например, 2-space-enter
Аналогично editorconfig устанавливаем плагин для своего IDE, чтобы eslint подсвечивал ошибки в процессе написания кода.
5. В файл package.json в раздел скрипты добавляем правило
"scripts": {
"lint": "eslint ./"
},
Это пользовательские скрипты. Запускаются они командой
$ npm run lint
Строка "main": "index.js" в package.json показывает какой файл будет проверять eslint
Строка /* eslint-disable */ в начале файла показывает, что eslint даный файл проверять не будет (используем для библиотек).
Запускаем eslint:
npm run lint
6. У меня появилось много ошибок "Expected linebreaks to be 'LF' but found 'CRLF'" это про перевод строки
Лечится указанным в .eslintrc.js правилом
rules: {
"linebreak-style": 0
},
Следующая ошибка "Strings must use singlequote quotes"
eslint ожидает одинарные кавычки, я предпочитаю двойные
Правило, предложенное здесь не сработало. Заменила кавычки.
Осталось ещё 135 ошибок )
Час редактирования кода и количество ошибок сократилось до 34. В основном были отсутствующие точки с запятыми, отсутствующие пробелы после if и for и перед фигурными скобками, линтер сам подсказывает где нужно объявление переменной const а где let. Остались более сложные для исправления ошибки с декомпозицией, вызовом функции до её объявления и ещё присвоение стилей параметрам функций.
Дополнено. Большую часть ошибок eslint может исправить автоматически
Для этого выполняем команду
./node_modules/.bin/eslint src --fix 7. Устанавливаем вебпак клиентское приложение и сервер
npm install -D webpack webpack-cli webpack-dev-server
Настраиваем файл webpack.config.js
Готовая конфигурация лежит здесь https://webpack.js.org/
Точка входа - откуда вебпак получает данные
entry: './src/index.js'
точка выхода - её подключаем в index.html
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
8. Устанавливаем загрузчики
npm install -D babel-loader style-loader css-loader html-webpack-plugin eslint-loader
9. Устанавливаем babel https://babeljs.io/ который умеет новый современный JavaScript-код превращать в код. понятный старым браузерам
npm install -D @babel/core @babel/preset-env
Добавляем в проект .babelrc - файл конфигурации
Проверяем всё ли нужное установили командой
npm run dev
У меня были ошибки, потому что вместо npm install (с двумя "ll" написала npm instal - с одной. Простое решение - писать npm i)
Доустанавливаем отсутствующие модули, результат - строка
i ｢wdm｣: Compiled successfully.
И ещё выше строка
i ｢wds｣: Project is running at http://localhost:8081/
npm run build
Появляется папка dist с файлами index.html, app.bundle.js, app.bundle.js.map