2.1. Формат конфигурационных файлов webpack

Когда речь идёт о конфигурационных файлах, первое, что приходит на ум — статичные текстовые файлы с описанием настроек приложения. Но такие файлы нетрудно превратить во что-то динамическое — гибкое, чтобы упростить управление логикой приложения без внесения дополнительных изменений.

Какими бывают конфигурационные файлы

Конфигурационные файлы webpack бывают двух форматов: .js и .json.

Часто в проектах используется файл gitignore — он служит для игнорирования некоторых файлов или директорий, которые при выполнении команды git push могут попасть в репозиторий. У этого файла свой формат — .gitignore.

Файл gitignore обязательно должен содержать директории node_modules и dist.

Пакеты Babel или ESLint также имеют свои конфигурационные файлы в формате .json. Порой такие файлы встречаются в форматах .js или .babelrc.

.baberrc и babel.config.json или .eslintrc.json и .eslintrc — одно и то же, всё они являются .json-форматом, однако в случае с .eslintrc и .babelrc, .json-формат указан неявно.

Что такое Babel

Babel — компилятор (преобразователь) современного кода JavaScript для запуска в старых браузерах. Например, можно преобразовать ES6 в ES5.

Пример конфигурации Babel в формате .json:

{
  // предустановки
  "presets": [
    [
      // предустановка для Babel, позволяющая использовать последнюю версию синтаксиса JS
      "@babel/preset-env",
      {
        // цели
        "targets": {
          // текущая версия Node.js
          "node": "current",
          // поддерживаемые браузеры (две последних версии и Internet Explorer 11)
          "browsers": [
            "last 2 versions",
            "ie >= 11"
          ],
          // поддержка браузера Google Chrome v100 
          "chrome": "100"
        }
      }
    ]
  ],
  // добавление плагинов
  "plugins": []
}

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

  module.exports = {
    presets: ['@babel/preset-env'],
    targets: {
      node: 'current',
      browsers: ["last 2 versions", "ie >= 11"],
      chrome: 100
    }
  }

У конфига Babel в формате .js тоже есть особенность. Для его настройки в формате знакомого нам объекта необходима запись module.exports.

Формат влияет лишь на удобство использования. Функциональность от изменения расширения останется той же.

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

Зачем нужны конфигурационные файлы

Возьмём для примера конфигурацию самого webpack. Как вы уже могли заметить из предыдущих модулей, при автоматической генерации готовых настроек появляется файл webpack.config.js. Webpack последней версии по умолчанию настроен «из коробки» так, чтобы найти именно этот файл и в последующем, опираясь на его содержимое, позволять нам более гибко настраивать проект.

Если вы используете ESLint, то можете настраивать этот пакет прямо в файле webpack.config.js — задавать определённые правила написания кода, которым проект будет подчиняться.

Но что, если этих правил станет очень много? Нарушатся такие принципы написания кода, как разбиение на модули, KISS (будь проще) и DRY (не повторяйся). В таких случаях гораздо удобнее управлять инструментом в файле с именем .eslintrc, где будут настройки только ESLint.