Создание проекта на NodeJS

Данная инструкция описывает создание нового проекта на NodeJS с пакетами и настройками, наиболее удобными для разработки в ES6. Webpack позволит производить компиляцию проекта NodeJS при внесении изменений в исходный код. ESLint и Prettifier позволят проверить ваш код и исправить его написание под стандарт ES6, а также укажут на ошибки в его написании

Результат компиляции будет складываться в директорию build. Для этих целей будут использоваться загрузчик eslint-loader и Webpack плагин copy-webpack-plugin

Архитектура проекта

Спроектируем архитектуру будущего проекта:

1. EsLint - поддержка ES6
   1. eslint-plugin-prettier - плагин для подключения Prettier в EsLint
   2. eslint-config-prettier - для конфигурирования правил Prettier
2. Prettier - форматирование кода и стилизация в Airbnb style guides
3. Babel - транспиляция проекта из ES6 в ES5
   1. babel-eslint - плагин описание ES6 от EsLint
4. Webpack - сборка проекта и запуск сервера

Создание проекта

Создаем директорию проекта starterTemplate и встаем в нее

cd C:\Develop\Javascript\starterTemplate

Инициализируем проект. После выполнения команды будет сгенерирован файл package.json. Если не указывать аргумент --yes, то создание проекта будет произведено в интерактивном режиме.

Wrote to C:\Develop\Javascript\starterTemplate\package.json:

{
  "name": "starterTemplate",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start"  : "webpack --mode=production && node build/index.bundle.js",
    "serve"  : "webpack serve --mode=production",
    "build"  : "webpack --mode=development",
    "watch"  : "webpack --watch --mode=development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Установка ESLint и Prettier

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

...
+ prettier@2.0.5
+ eslint@7.6.0

Устанавливаем плагины для совместной работы ESLint и Prettier

...
+ eslint-plugin-prettier@3.3.1
+ eslint-config-prettier@8.1.0
+ eslint-webpack-plugin@2.5.2

Установка Babel

Установим транспайлер Babel и его плагин для работы с ESLint. С его помощью мы будем превращать полученный из ESLint ES6 код в ES5. Таким образом мы получим поддержку всех браузеров

...
+ @babel/core@7.11.1
+ babel-loader@8.2.2

Модуль babel-eslint позволит пользоваться возможностями ES6, выполнять импорт и экспорт модулей. Этот модуль будет сигнализировать ESLint, что мы работаем ES6, а также выполнять компиляцию

...
+ babel-eslint@10.1.0

Установка Webpack

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

Устанавливаем webpack и webpack-cli

...
+ webpack-cli@3.3.12
+ webpack@4.44.1

Добавим в Webpack stylelint и stylelint-webpack-plugin, которые позволят Webpack обрабатывать файлы стилей

...
+ stylelint@13.12.0
+ stylelint-webpack-plugin@2.1.1

Настройка Webpack

Создаем файл webpack.config.js в директории проекта. Сразу укажем точку входа в приложение: ./src/index.js. Директория для скомпилированных результатов: /build

const path = require('path');

module.exports = {
    entry: "./src/index.js",
    output: {
        path: path.join(__dirname, "/build"),
        filename: "index.bundle.js"
    }
};

Создаем директорию src и в ней создаем новый файл index.js. ESLint описывает стандарт оформления кода, поэтому на основе его наполним index.js

/**
 * @fileoverview Application entry point
 * @author Itcraper
 */

console.log("Hello world!");