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

Разработчики: Tobias Koppers, Sean Larkin, Johannes Ewald, Juho Vepsäläinen, Kees Kluskens и участники Webpack.

Плюсы:

  • Усовершенствованный механизм долгосрочного кэширования позволяет собрать проект за несколько секунд.
  • Он генерирует выходные данные на основе конфигураций. Вы также можете определить точки разделения для создания отдельных пакетов в самом коде проекта.
  • Горячая замена модуля позволяет изменять проект во время работы и экономит ваше драгоценное время, избегая полной перезагрузки приложения.
  • Его гибкость дает вам контроль над тем, как обрабатывать различные активы, с которыми вы сталкиваетесь.
  • Webpack автоматически обрабатывает зависимости и включает их в окончательный пакет на основе сгенерированного графа зависимостей.
  • Существует высокая кривая обучения, но преимущества Webpack того стоят.

Лучшие компании, использующие это:

Статистика:

  • Звезды GitHub: 59 тыс.
  • Дата выпуска: 10 марта 2012 г.

"Больше информации"

2. Просмотр

Browserify — еще один интересный сборщик модулей, который долгое время соперничал с Webpack. Он простой, мощный и простой в установке. Его преимущества обусловлены возможностью расширения экосистемы Node. Browserify — это не просто сборщик модулей. Он приносит всю мощь Node.js в ваш браузер. Он гибкий, так как его можно расширить с помощью плагинов. Browserify позволяет запрашивать файлы, как и Node.js.

Разработка: Browserling team

Плюсы:

  • Это сводит к минимуму многие задачи предварительной обработки с преобразующей системой.
  • Для управления зависимостями не требуются инструменты командной строки, что позволяет легко интегрироваться со сценариями NPM.
  • Поддержка CSS и SCSS может быть добавлена ​​с помощью преобразования scssify.
  • Это решает проблемы асинхронной загрузки.
  • Этому легко научиться.
  • Отлично работает с gulp.js.

Лучшие компании, использующие это:

Статистика:

  • Звезды GitHub: 13,8 тыс.
  • Дата выпуска: 10 октября 2020 г. (стабильная версия 17.0.0)

"Больше информации"

3. Предохранитель

FuseBox — это настраиваемый интерфейсный инструмент разработки, который часто обновляется. Он прост в настройке и обладает мощными функциями. По сравнению с другими сборщиками модулей конфигурации FuseBox просты, что позволяет разрабатывать приложения в кратчайшие сроки. Вы также можете легко использовать плагины с FuseBox, чтобы позаботиться обо всем, что ядро ​​FuseBox не обрабатывает.

Плюсы:

  • По умолчанию он использует компилятор TypeScript вместе с надежной системой кэширования.
  • Возможность заменить Babel.
  • Горячая замена модуля.
  • Автоматическое разделение и оптимизация CSS.
  • Он поддерживает встроенную программу запуска задач для своего обширного набора плагинов.
  • Он имеет встроенную программу запуска задач, и проект автоматически обновляется, чтобы отразить ваши изменения.
  • Также поддерживается динамический импорт EMS.

Лучшие компании, использующие это:

Статистика:

  • Звезды GitHub: 4,1 тыс.

"Больше информации"

4. Сводка

Rollup — это сборщик модулей для JavaScript, который компилирует небольшие фрагменты кода в нечто большее и более сложное, например, в библиотеку или приложение. Он использует новый стандартизованный формат для модулей кода, включенных в версию JavaScript ES6, вместо предыдущих идиосинкразических решений, таких как CommonJS и AMD. Модули ES позволяют свободно и беспрепятственно комбинировать наиболее полезные отдельные функции из ваших любимых библиотек.

Плюсы:

  • Помогает оптимизации приложений.
  • Поддерживает встряхивание дерева и подъем области.
  • Он может оптимизировать модули ES для более быстрой загрузки в последних браузерах.
  • Он может «сворачивать» и сжимать данные в единый итоговый документ для легкого доступа.

Лучшие компании, использующие это:

Статистика:

  • Звезды GitHub: 20,4 тыс.

"Больше информации"

5. Посылка

Parcel — еще один новый, но многообещающий сборщик модулей для проектов JavaScript. Parcel использует рабочие процессы для обеспечения многоядерной компиляции и имеет кеш файловой системы для быстрой перестройки даже после перезапуска. Благодаря своей простой и готовой к работе работе она повышает производительность и сводит к минимуму проблемы во время настройки.

Плюсы:

  • Горячая замена модулей означает, что Parcel автоматически обновляет модули в браузере по мере того, как вы вносите изменения во время разработки; настройка не требуется.
  • Объединяет все активы, включая JS, CSS, HTML, файлы, изображения и многое другое.
  • В Babel, PostCSS и PostHTML код преобразуется автоматически.
  • Parcel печатает кадры кода с выделенным синтаксисом при обнаружении ошибок, чтобы помочь вам точно определить проблему.
  • Используя синтаксис динамического импорта (), Parcel разделяет ваши выходные пакеты, чтобы загрузить только то, что необходимо при начальной загрузке.

Лучшие компании, использующие это:

Статистика:

  • Звезды GitHub: 38,7 тыс.

"Больше информации"

Первоначально опубликовано на raftlabs.co