5 сборщиков модулей для приложений Node.js

Node.js была самой используемой технологией веб-разработки среди профессиональных разработчиков в 2022 году.

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

Сборка модулей объединяет файлы и их зависимости в один набор. Сборка позволяет разработчикам эффективно управлять зависимостями и упростить развертывание.

В этой статье будут рассмотрены 5 сборщиков модулей для вашего приложения на Node.js.

1. Webpack: мощная сборка и оптимизация

Webpack — это популярный инструмент для эффективной сборки и оптимизации приложений Node.js. Webpack можно использовать не только для сборки JS-приложений, но и для CSS, изображений и многого другого.

Webpack еженедельно загружают 27 миллионов раз через NPM.

Преимущества Webpack:

1. Предоставляет граф зависимостей.
2. Поддерживает разбивки пакетов на мелкие фрагменты, чтобы загружать их по требованию.
3. Поддерживает широкий спектр плагинов.
4. Мощная поддержка сообщества.

Недостатки Webpack:

1. Его сложно настроить, если вы новичок в Webpack.
2. Время сборки на Webpack выше, чем у конкурентов.

Как использовать Webpack с Node.js

Шаг 1. Установите Webpack.

			npm install webpack webpack-cli --save-dev
		

Шаг 2. Создайте конфигурацию Webpack.

Создайте новый файл с именем webpack.config.js в корневом каталоге. Он будет содержать все конфигурации, связанные с Webpack.

			// webpack.config.js
const path = require('path');

module.exports = {
  target: 'node', 
  entry: './src/index.js', 
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  // Additional configuration goes here
};
		

Код выше — это пример конфигурации веб-пакета. В target указан node, так как мы используем приложение на Node.js.

Артибут entry указывает на входной файл приложения, а атрибут output позволяет определить имя пакета и конечный каталог.

Если вы используете загрузчики, их можно добавить в дополнительных конфигурациях:

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

Шаг 3. Обновите package.json с помощью Webpack.

Обновите команду сборки в файле package.json, чтобы запустить конфигурацию Webpack.

			"scripts": {
  "build": "webpack --config webpack.config.js" 
}
		

Выполните команду, чтобы завершить сборку.

			npm run build
		

2. Parcel: сборка с нулевой конфигурацией

Parcel — еще один популярный сборщик, который вы можете использовать для сборки приложений Node.js.

В отличие от Webpack, вам не потребуется писать дополнительные настройки для Parcel, так как это сборщик с нулевой конфигурацией.

Он автоматически обнаруживает зависимости проекта.

Преимущества посылки:

1. Не требует дополнительной настройки.
2. Предлагает обновления в режиме реального времени.
3. Легко импортирует и объединяет различные типы ресурсов: CSS, изображения и шрифты.
4. Поддерживает разделение кода.
5. Использует кэширование и параллельную обработку для оптимизации производительности.

Недостатки посылки:

1. Возможности настройки ограничены.
2. Меньшая экосистема по сравнению с Webpack.

Как использовать Parcel с Node.js

Шаг 1. Установите Parcel.

			npm install parcel-bundler --save-dev
		

Шаг 2. Добавьте скрипты в package.json.

Обновите команду сборки в файле package.json.

			"scripts": {
  "build": "parcel build src/index.js --out-dir dist"
}
		

В приведенном выше примере файл ввода (src/index.js) и выходной каталог (dist) определяются в команде сборки. Однако Parcel не требует их декларации и автоматически определяет файл ввода.

Выполните команду npm run, чтобы собрать пакет.

3. Browserify: удобный сборщик JavaScript

Browserify — широко используемый сборщик JavaScript с 2 миллионами еженедельных загрузок NPM. Browserify поддерживает не только Node.js, но и операторы require() в браузере.

Преимущества Browserify:

1. Позволяет писать код с использованием синтаксиса модуля Node.js (require()).
2. Простая конфигурация. 
3. Мощное сообщество и широкий выбор плагинов. 
4. Совместимость с большинством браузеров.

Недостатки Browserify:

1. Ограниченные возможности оптимизации.
2. Не поддерживает динамическое разделение кода.

Как использовать Browserify с Node.js

Шаг 1. Установите Browserify.

			npm install browserify --save-dev
		

Шаг 2. Добавьте сценарии Browserify в package.json.

Как и в Parcel, вам не нужен отдельный файл конфигурации для Browserify.

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

			"scripts": {
  "build": "browserify src/index.js -o dist/bundle.js"
}
		

Здесь src/index.js — это входной файл приложения Node.js, а dist/bundle.js — выходной файл.

Выполните команду сборки npm run, чтобы собрать пакет.

4. Brunch: простая и быстрая сборка приложений на JavaScript

Brunch — это сборщик JavaScript, ориентированный на простоту и скорость.

Хотя он менее популярен, чем Webpack или Browsify, его легко изучить, а его функции помогают разработчикам сосредоточиться на реализации функций, а не на настройке.

У Brunch более 6,8 тыс. звезд на GitHub.

Преимущества Brunch:

1. Простота установки и настройки.
2. Инкрементальный процесс сборки.
3. Поддержка разных языков и препроцессоров: JavaScript, TypeScript, ES6 и CoffeeScript.
4. Поддержка внешних библиотек через npm.

Недостатки Brunch:

1. Ограниченные возможности настройки.
2. Мало плагинов и загрузчиков.
3. Не подходит для сложных проектов.

Как использовать бранч с Node.js

Шаг 1. Установите Brunch.

			npm install brunch
		

Шаг 2. Создайте файл конфигурации Brunch.

Создайте новый файл с именем brunch-config.js в корневом каталоге.

			module.exports = {
  files: {
    javascripts: {
      entryPoints: {
        'app.js': 'src/js/app.js', 
      },
    },
    stylesheets: {
      joinTo: 'app.css', 
    },
  },
  // Additional configurations go here
};
		

Здесь атрибут entryPoints определяет файл входа для приложения Node.js, а stylesheets обозначает выходной файл для CSS.

Если вы хотите использовать плагины, вы можете добавить их в конфигурацию:

			module.exports = {
  files: {
    ...
  },

  plugins: { 
    babel: {presets: ['latest', 'react']}, 
    postcss: {processors: [require('autoprefixer')]} 
  }
};
		

Шаг 3. Добавьте сценарии Brunch в package.json.

Обновите команду сборки в файле package.json с помощью сборки Brunch. Выполните команду npm run build для сборки пакета.

			"scripts": {
  "build": "brunch build"
}
		

5. Rollup: эффективная сборка модулей

Rollup — еще один популярный сборщик модулей JavaScript, ориентированный на высокую производительность. Он использует синтаксис модуля ES для создания производительных пакетов.

Помимо JavaScript, Rollup также поддерживает CSS и JSON.

Еженедельно Rollup загружают более 12 миллионов раз через NPM.

Преимущества Rollup:

1. Оптимизирует код, удаляя ненужные куски.
2. Поддерживает разделение кода.
3. Поддерживает синтаксис ES6.
4. Может создавать пакеты в модулях CommonJS, AMD, UMD и ES.

Недостатки Rollup:

1. Конфигурация может быть сложной.
2. Небольшие сообщество и экосистема плагинов.

Как использовать Rollup с Node.js

Шаг 1. Установите Rollup.

			npm install rollup --save-dev
		

Шаг 2. Создайте файл конфигурации для сборки.

Создайте новый файл с именем rollup.config.js в корневом каталоге.

			// rollup.config.js
export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs',
  },
  plugins: [ 
    resolve({ 
      extensions: ['.js'], 
    }), 
    babel({ 
      babelHelpers: 'bundled', 
      exclude: 'node_modules/**', 
    }), 
  ],
};
		

В этой конфигурации:

1. Атрибут input определяет точку входа вашего приложения Node.js.
2. Атрибут output определяет выходной файл и формат для пакета. В примере тип вывода — CommonJS.
3. Массив plugins содержит Babel.

Шаг 3. Добавьте сценарии объединения в package.json.

Наконец, обновите команду сборки в файле package.json и выполните команду npm run build, чтобы собрать пакет.

			"scripts": {
  "build": "rollup build"
}
		

Заключение

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

В этой статье мы рассмотрели пять инструментов, которые вы можете использовать для сборки приложений Node.js в соответствии с вашими нуждами.

Например, если ваше приложение большое и требует дополнительных настроек, выберите Webpack или Rollup. Вы можете использовать сборщик по типу Parcel или Brunch, если вам не нужны пользовательские конфигурации.

Надеемся, что эти сборщики помогут вам создавать более производительные приложения Node.js.