Настройте многостраничный шаблон JavaScript с помощью действий Webpack 5, Babel, Husky и Github.

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

Если вы ищете настройку многостраничного проекта JavaScript с использованием Webpack 5, вы попали по адресу.

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

Вот обзор того, что вы собираетесь осветить в этом уроке

1- Настройка базовой структуры проекта
2- Настройка Webpack 5
— Настройка HTML-шаблонов с помощью Webpack Plugins
— Настройка CSS, Babel с помощью Webpack Loaders
—Настройка ресурсов (Папка изображений)
— Настройка горячей перезагрузки в среде разработки
— Настройка многостраничного режима с помощью Webpack
— Настройка ESLint и Prettier
3- Настройка Lint-Staged и Husky
4- Настройка основных действий Github

Начнем с настройки –

Откройте приложение терминала, создайте каталог для своего проекта и инициализируйте новый проект Node.js. Назовем его javascript-boilerplate.

mkdir javascript-boilerplate
cd javascript-boilerplate
npm init -y

Вы увидите файл package.json, созданный непосредственно в корне проекта. Этот файл используется для хранения метаданных проекта и зависимостей проекта.

Далее мы создадим базовую структуру папок для сохранения кода, CSS и ресурсов, таких как изображения.
Создайте файл src, images and fonts folder, and index.js and index.html.

mkdir -p src src/assets/fonts src/assets/images
cd src
touch index.js index.html

Добавьте шаблон index.html.

<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Title</title>
</head>
<body>
<div id="root">
    <h1>This is a JS boilerplate</h1>
</div>
</body>
</html>

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

Настройка Webpack 5:

Установите webpack и webpack-cli.

npm install --save-dev webpack@5 webpack-cli@5

webpack — это сборщик модулей для приложений JavaScript. Он в первую очередь отвечает за сбор всех файлов JavaScript, файлов CSS, файлов изображений и других ресурсов и объединение их в один или несколько выходных файлов.

webpack-cli — это инструмент командной строки для настройки Webpack.

Затем создайте файл webpack.config.js в корневом каталоге проекта.

touch webpack.config.js

Добавьте вход и выход.

const path = require('path');

module.exports = {
 entry: {
   index: './src/index.js',
 },
 output: {
   filename: '[name].bundle.js',
   path: path.resolve(__dirname, 'dist'),
   clean: true,
 },
};

Вход. Точка входа — это файл JavaScript (один или несколько), в котором веб-пакет начинает процесс объединения. Он пересекает граф зависимостей проекта от этих точек входа. Мы определили единый путь записи для корня /index.

Вывод — указывает, что модуль, определенный в объекте записи, будет преобразован в пакет, а результат будет скопирован в папку /dist. Мы добавляем bundle.jsк имени файла. Обратите внимание на флаг clean. Он используется для очистки папки /dist перед созданием новой сборки.

Мы готовы сгенерировать сборку. мы будем использовать команду webpack --mode development для создания сборки. Режим по умолчанию — это производство в Webpack, поэтому мы явно определили режим разработки с помощью команды.

Откройте файл package.json и добавьте запись в объект сценария. Мы можем напрямую

"scripts": {
  "dev": "webpack --mode development"
},

Запустите npm run dev, и вы увидите папку dist/ в корне проекта.

Примечание: мы можем напрямую использовать webpack --mode development, но мы хотим упростить команду, поэтому добавили ее в объект сценария.

Это самые базовые конфигурации, которых достаточно для запуска шаблона.

Настройка HTML-шаблонов с помощью `Webpack Plugins`

Вы возможно заметили, что в папке /dist есть только один файл с именем index.bundle.js, хотя мы создали файл index.html. Однако Webpack не скопировал index.html в папку /dist.
Здесь нам нужен html-webpack-plugin

html-webpack-plugin — Он используется либо для создания HTML-шаблона, либо для использования нашего собственного шаблона.

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

Установите плагин html-webpack-plugin

npm install --save-dev html-webpack-plugin

Добавьте конфигурации html-webpack-plugin в webpack.config.js.

/**/
const HtmlWebpackPlugin = require('html-webpack-plugin');

{
  entry: {
       /**/
  },
  output: {
       /**/
  },
  plugins: [
    new HtmlWebpackPlugin({
    template: `./src/index.html`,
    filename: `index.html`,
    inject: true,
   }),
  ]
}

шаблон —Определяет путь к шаблону, который плагин будет копировать в папку /dist
имя файла — Имя шаблона в папке /dist
inject — Этот флаг используется для внедрения всех ресурсов в данный шаблон. По умолчанию его значение истинно, поэтому вы также можете пропустить это, но я добавил его, чтобы подчеркнуть его поведение

Запустите команду npm run dev.
Вы увидите, что файл index.html создан внутри папки /dist. Примечание index.bundle.js автоматически вставляется в шаблон. Это связано с флагом inject.
откройте файл dist/index.html в браузере, и вы увидите отрисованную HTML-страницу.

Настройте CSS, Babel с помощью `Webpack Loaders`

Мы будем использовать загрузчики для настройки Babel и SCSS в нашем проекте.

Загрузчики позволяют нам предварительно обрабатывать файлы перед их добавлением в пакет. Это позволяет преобразовывать файлы, такие как JavaScript, CSS и изображения, в модули и интегрировать их в приложение.

Установить SCSS:

Создайте файл index.scss в папке src/.

cd src
touch index.scss
body {
  background: #e7a462;
}

Если вы запустите npm run dev, вы увидите, что стили CSS не применяются.

Для обработки файлов .scss нам нужно установить пару библиотек.

npm install --save-dev style-loader css-loader sass-loader node-sass

style-loader —Внедрение стилей CSS в DOM.
css-loader —Управление зависимостями CSS в проекте. Он интерпретирует @import и разрешает их.
sass-loader — компилирует файлы SCSS и Sass в css.
node-sass —Это зависимость, которая используется sass-loader

Далее нам нужно добавить объект module внутри конфигурации webpack. Используется для указания того, как модули должны обрабатываться в процессе
объединения. Это позволяет определять правила и загрузчик для обработки различных типов файлов.

{
  /*...*/
  module: {
    rules: [
    {
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
    }
   ]
  }
}

Откройте файл index.js и файл import index.scss.

import './index.scss';

Запустите npm run dev, чтобы создать новую сборку. Откройте файл dist/index.html в браузере, и вы увидите примененный фоновый CSS.

Вы заметите, что в папке dist/нет отдельного файла для CSS. Для этого мы собираемся установить пакеты mini-css-extract-plugin и css-minimizer-webpack. -плагин.

npm install --save-dev mini-css-extract-plugin css-minimizer-webpack-plugin

mini-css-extract-plugin — Извлеките CSS в отдельный файл внутри /dist old
css-minimizer-webpack-plugin — Оптимизация и минимизация CSS

Добавьте конфиги для этих плагинов в webpack.config.js

{
  /*...*/
  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
  
  {
   /*...*/
   plugins: [
    new HtmlWebpackPlugin({
      template: `./src/index.html`,
      filename: `index.html`,
      inject: true,
    }),
     new MiniCssExtractPlugin({
       filename: '[name].css',
     }),
   ],
   module: {
     rules: [
     {
       test: /\.scss$/,
       use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
     }
    ]
   },
   optimization: {
     minimize: true,
     minimizer: [new CssMinimizerPlugin()],
   },
  }
}

Мы внесли следующие изменения в файл webpack.config.js.

1. Импортируйте плагины
2. Инициализируйте mini-css-extract-plugin в массиве plugins< br /> 3. Обновите ключ правил для scss. Замените style-loader на MiniCssExtractPlugin.loader
4. Добавьте ключ optimization для настройки плагина минимизации CSS.

Запустите npm run dev, и вы увидите новый минимизированный файл index.css в папке dist/.

Мы успешно настроили Scss.

Установите Вавилон:

Мы хотим использовать новейшие кроссбраузерные функции JavaScript. Для этого нам нужно настроить babel

babel — берет код Javascript и преобразует его в стандартный JavaScript, чтобы он мог работать во всех браузерах, и мы могли использовать современные функции во всех браузерах.

Установить пакеты Babel

npm install --save-dev @babel/core @babel/preset-env babel-loader

Вот как эти библиотеки работают вместе:
babel-loader — он настроен в конфигурациях Webpack для обработки файлов JavaScript. Когда Webpack обнаруживает файл JavaScript, babel-loader отвечает за его передачу в Babel для транспиляции.

babel/core — это основная библиотека Babel. Он отвечает за фактический анализ, преобразование и генерацию ванильного JavaScript.

babel-env — Этот инструмент помогает писать современный код JavaScript и делать его работоспособным во всех браузерах. в конфигурациях Babel-env мы можем указать, на какой версии JavaScript мы хотим написать код, и он выяснит, как перевести его на стандартный JavaScript.

Создайте новый файл.babelrc для конфигураций Babel.

touch .babelrc

Добавьте эти конфиги в файл .babelrc

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

Далее добавьте конфигурации Babel в webpack.config.js.

{
/*...*/
module: {
 rules: [
   /*...*/
   {
      test: /\.(js)$/,
      exclude: /node_modules/,
      use: ['babel-loader'],
   },
  ],
 },
}

Мы поручаем Webpack генерировать старый код JavaScript для всех файлов .js, используя babel-loader, но исключая папку node_modules.

Мы сделали!! Мы настраиваем Babel и можем написать последнюю версию JavaScript в вашем приложении. Вы можете добавить последнюю версию кода в файл index.js, и он должен работать.

Настроить активы:

Далее нам нужно настроить активы. Давайте добавим изображение в папку assets/images, поскольку оно будет использоваться в файле index.js. Для этого нам нужно включить обработку изображений в исходном коде, чтобы мы могли использовать оператор import для изображений.

Добавить конфиги в файл webpack.config.js

{
 /*...*/
 output: {
 /*...*/
   assetModuleFilename: 'images/[name][ext]',
 },
 module: {
 rules: [
 /*...*/
    {
      test: /\.(?:ico|gif|png|jpg|jpeg|webp)$/i,
      type: 'asset/resource',
    },
  ]
 },
}

Мы закончили настройку изображений.

Скопируйте файл изображения в папку assets/images и используйте его в файле index.js с помощью оператора import.

import bg from './assets/images/[IMAGE_NAME]';

Запустите сборку npm run dev. Вы должны увидеть, что файл изображения из папки assets/images копируется в папку dist/images.

Настройка горячей перезагрузки
Нам нужно запускать npm run dev каждый раз, когда нам нужны изменения. Мы хотим, чтобы веб-пакет перестраивал проект при каждом изменении. Для этого мы собираемся установить webpack-dev-server

npm install --save-dev webpack-dev-server

В webpack.config.js добавьте конфигурации для webpack-dev-server.

{
 /*...*/
output: {
    /*...*/
},
 devServer: {
   watchFiles: ['src/*.html'],
   static: path.resolve(__dirname, './dist'),
   hot: true,
   open: true,
 },
 watchOptions: {
   poll: 1000,
   ignored: '/node_modules/',
 },
}

Обновите файл package.json и измените ключ dev.

{
  "dev": "webpack serve --mode=development & webpack --mode development"
}

Ура! У нас сейчас все хорошо.
Запустите npm run dev, в браузере должна открыться страница. С этого момента всякий раз, когда вы вносите изменения в файл index.css, index.js or index.html, это должно отражаться в браузере.

Многостраничная настройка

Файлы HTML, CSS и JS теперь работают, но подождите! Мы обрабатываем один файл. Как обрабатывать несколько файлов??

Создайте структуру папок регистрации.

cd src
mkdir signup
cd signup
touch signup.html signup.scss signup.js

Скопируйте содержимое в signup.html.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
  </head>
  <body>
    <div id="root">
      <h1>This is signup page</h1>
    </div>
  </body>
</html>

Далее нам нужно добавить конфигурации в webpack.config.js для обработки нескольких файлов HTML.

/*...*/
const pages = ['signup'];

const mainHtmlPage = [
 new HtmlWebpackPlugin({
   template: './src/index.html',
   filename: 'index.html',
   chunks: ['index'],
 }),
];

const htmlPluginEntries = mainHtmlPage.concat(
 pages.map(
   (page) =>
     new HtmlWebpackPlugin({
     template: `./src/${page}/${page}.html`,
     filename: `${page}.html`,
     chunks: [page],
   }),
 ),
);

module.exports {
 /*...*/
 entry: {
   index: './src/index.js',
   signup: './src/signup/signup.js', // signup entry for signup module
 },
 devServer: {
    watchFiles: ['src/*.html', 'src/*/*.html'], // add new entry to handle signup html files
    static: path.resolve(__dirname, './dist'),
    hot: true,
    open: true,
 },
 plugins: htmlPluginEntries.concat([
     new MiniCssExtractPlugin({
     filename: '[name].css',
   }),
 ]),
}

Добавляем следующие конфиги для многостраничной настройки

1- Определен массив pages и добавлено имя папки signup
2-Нам необходимо инициализировать каждый шаблон с помощьюHtmlWebpackPlugin. Для этого мы выполним цикл по массиву страниц, определим конфигурации шаблонов для каждого шаблона и сохраним их в htmlPluginEntries
3. Обновите plugins введите и используйте htmlPluginEntriesс остальными конфигурациями плагинов
4. Обновите объект entry. Добавьте новую запись для модуля регистрации в объект entry
5- Обновите объект devServer. В ключе watchFiles добавьте шаблоны для отслеживания изменений в папке src/signup.

Перезапустите сервер и запустите npm run dev
. Перейдите к [LOCALHOST_URL]/signup.html, и вы увидите, что регистрация страница отображается.

Чтобы добавить новую страницу, в webpack.config.js добавьте имя папки в массив pages, и все готово.
В этом проекте я Я использую шаблон на основе функций для организации кода, поэтому все ресурсы, связанные со страницей регистрации, хранятся в папке регистрации.

ESLint и красивее

Далее мы хотим обеспечить соблюдение единых лучших практик и форматирования на протяжении всего проекта. Для этого мы собираемся настроить
ESLint and Prettier в нашем проекте.

Настройка ESLint

npm install --save-dev eslint-webpack-plugin eslint @babel/eslint-parser

Eslint — Помогает обнаружить и исправить ошибки. Это и есть настоящий линтер. Мы настроим ESlint, используя файл .eslintrc в каталоге проекта.

eslint-wepack-plugin — Это плагин веб-пакета для запуска ESLint во время процесса сборки веб-пакета.

babel/eslint-parse — Это анализатор ESLint, который позволяет ESLint анализировать код JavaScript, использующий функции последней версии. Это помогает ESLint, когда в процессе транспиляции участвует Babel.

Инициализируйте eslint-webpack-plugin в webpack.config.js

const ESLintPlugin = require('eslint-webpack-plugin'); { /*...*/ plugins: htmlPluginEntries.concat([ new MiniCssExtractPlugin({ filename: '[name].css'}) ], new ESLintPlugin({ failOnError: false, failOnWarning: false, emitWarning: false, emitError: false, }), ), }

Создайте файл .eslintrc для определения конфигураций ESlint в каталоге проекта.

touch .eslintrc

Добавьте правила в файл .eslintrc

{ "parser": "@babel/eslint-parser", "extends": ["eslint:recommended"], "rules": { "quotes": [1, "single"] }, "env": { "browser": true, "node": true } }

Добавить файл .eslintignore

touch .eslintignore

Мы не хотим запускать ESLint в файлах /dist, node_modules и webpack.config.js
Добавьте это в файл .eslintignore

/dist /node_modules webpack.config.js

Обновите файл package.json, добавьте lint и lint:fix в объект script для запуска Eslint.

"script: { "dev": "webpack serve --mode=development & webpack --mode development", "lint": "eslint .", "lint:fix": "eslint . --fix" }

Мы сделали!

Запустите линтер npm run lint, чтобы проверить ошибки или предупреждения ESLint в базе кода.
Используйте команду npm run lint:fix, чтобы исправить ошибки ESLint, которые можно исправить автоматически.

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

Установить prettier

npm install --save-dev prettier

Создать файл .prettierrc

touch .prettierrc

Добавьте файл конфигурации для prettier в каталог проекта.

{ "singleQuote": true, "bracketSpacing": true, "printWidth": 80, "tabWidth": 2, "semi": true, "trailingComma": "all" }

Добавить файл .prettierignore

touch .prettierignore

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

./dist .babelrc .eslintrc README.md

Обновите файл package.json, добавьте команды prettier и prettier:fix в объект script для более удобной работы с помощью npm.

{ "script": { /*...*/ "prettier": "prettier . --check", "prettier:fix": "prettier . --write" } }

Запустите prettier npm run prettier, и он проверит проблемы форматирования в файлах проекта.
Запустите команду npm run prettier:fix, чтобы устранить все проблемы с форматированием.

Мы закончили настройку многостраничного шаблона JavaScript. Далее мы настроим husky и github-actions.

Настройка lint-staged и Husky

Rre-Requisite. Убедитесь, что в вашем проекте настроен git. Запустите команду
git init, чтобы инициировать ее.

Запускать ESlint и prettier каждый раз перед фиксацией в git — утомительный процесс. Мы хотим запустить линтер перед отправкой файлов в git. А вот и lint-staged и Husky.

Установить lint-staged

npm install --save-dev lint-staged

lint-staged —пакет используется для запуска линтера только на проиндексированных файлах git.

Обновите файл package.json, добавьте lint-staged конфигураций для запуска линтера в промежуточных файлах git.

{ /**/ "lint-staged": { "*.{js}": [ "eslint --fix", "prettier . --check" ] } }

Мы собираемся использовать lint-staged в husky.

husky — используется для улучшения коммитов git. Это упрощает настройку и управление git-хуками в проекте. Перехватчики Git — это сценарии, которые автоматически выполняются до или после определенных событий Git, таких как фиксация или отправка кода. (https://github.com/typicode/husky)

Далее установите husky

npm install --save-dev husky

Давайте настроим перехватчик предварительной фиксации, который будет запускать linter перед коммитом в git.

Обновите файл package.json, добавьте запись prepare в объект scripts.

{ "scripts": { /*...*/ "prepare": "husky install" }, }

Инициализируйте husky, выполнив команду в каталоге проекта.

npm run prepare

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

npx husky add .husky/pre-commit git add .husky/pre-commit

Это создаст файл .husky/.pre-commit.

Откройте файл .husky/.pre-commit и замените его содержимое этим.

#!/usr/bin/env sh . "$(dirname - "$0")/_/husky.sh" npx lint-staged

Мы сделали! При фиксации в git будут запущены ESLint и prettier. Фиксация должна завершиться неудачно, если произойдет ошибка ESLint или более красивая версия.

Сделайте коммит, и вы должны увидеть команды lint, работающие в консоли.

Настройка действий Github:

И последнее, но не менее важное: давайте настроим действия github.

Если пользователь комментируетхук pre-commit, то код с ошибками ESLint или более красивыми может быть зафиксирован в git.
Мы хотим обязательно отправить ошибку. -бесплатный код.

Github-action – это инструмент для автоматизации рабочих процессов разработчиков и процессов CI/CD. Его предоставляет Git Hub.

Перейдите в каталог проекта и создайте .github/workflows directory.

mkdir -p .github/workflows cd .github/workflows

В каталоге рабочих процессов создайте файл с именем code-quality.yml.

touch code-quality.yml

Добавьте скрипт yaml в файл code-quality.yml для запуска ESLint и prettier каждый раз, когда мы создаем запрос на включение на github.

name: ESLint and Prettier run-name: Running ESLint and Prettier on: push: # Trigger the workflow on push events for any branch pull_request: types: [synchronize, opened, reopen] jobs: code_quality: name: ESLint and Prettier runs-on: ubuntu-latest steps: - name: Checkout code uses: actions/checkout@v2 - name: Install node.js uses: actions/setup-node@v3 with: node-version: 16 - name: Install dependencies run: npm install - name: Run ESLint run: npm run lint - name: Run Prettier run: npm run prettier

Ниже приводится краткое описание сценария:
1- имя и имя запуска: Укажите имя действия github
2- on: Мы хотим запускать Линтер всякий раз, когда на github отправляется код или создается PR.
3-задания: Этот ключ содержит фактический скрипт, который мы собираемся запустить.

На github на вкладке Actions вы должны увидеть действие GitHub, выполняемое всякий раз, когда вы отправляете или создаете PR.

Мы сделали! Мы успешно настроили многостраничный шаблон JavaScript.

Ниже вы найдете ссылку на репозиторий javascript-boiler.
https://github.com/sehrishnaveed/javascript-boilerplate

Пожалуйста, поставьте палец вверх, если это помогло вам, и не стесняйтесь комментировать.

Спасибо.

Настройте многостраничный шаблон JavaScript с помощью действий Webpack 5, Babel, Husky и Github.

Настройка Webpack 5:

Настройка HTML-шаблонов с помощью Webpack Plugins

Настройте CSS, Babel с помощью Webpack Loaders

Установите Вавилон:

Настроить активы:

ESLint и красивее

Настройка ESLint

Настройка lint-staged и Husky

Вопросы по теме

Настройка HTML-шаблонов с помощью `Webpack Plugins`

Настройте CSS, Babel с помощью `Webpack Loaders`