FuseBox - это сборщик пакетов и загрузчик модулей нового поколения, который является результатом нашего многолетнего опыта работы с требованиями сложных проектов и многих инструментов разработки.

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

Почему?

Что ж, мы знаем, что с современными требованиями к приложениям добавление ссылок сценариев на страницу больше не сокращает ее, должен быть лучший способ управлять сложностью, быстрыми изменениями и цепочкой зависимостей ресурсов, поэтому нам нужно использовать сборщик / загрузчик модуля. В этой области есть много известных и неизвестных инструментов, и, как и все остальные, сезон охоты начался!

Мы перепробовали все RequireJS, Browserify, WebPack и многие многие другие… но в наших проектах всегда было какое-то требование, которое нам не предлагало ни один из этих сборщиков, поэтому мы решили зайти на кухню и приготовить своего собственного зверя. !

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

Инструменты, которые дошли до нашего последнего раунда перед созданием FuseBox, были WebPack, JSPM, StealJS. Опять же, все эти инструменты - отличная разработка, они могут помочь вам в работе, и, что наиболее важно, за ними стоят сообщества, но вот с чем мы действительно столкнулись:

WebPack: без сомнения, сильный и глубокий инструмент, но отсутствие документации (честно говоря, команда выпустила новый веб-сайт документации, который выглядит намного лучше) и шаблонного кода, необходимого для сборки ваш проект для нас слишком сложен. С WebPack можно делать все, что угодно, но это непросто!

JSPM: это наш любимый проект после FuseBox, это действительно недооцененный проект, к тому же Гай Бедфорд - один из самых добрых и умных людей в индустрии. Конфигурация JSPM более проста, она принимает практически любой формат модуля, но работает медленно в браузере, если вы не создаете сборку, ориентированную на UMD или CommonJS.

StealJS: интересный проект, поскольку он разделяет части WebPack и JSPM. как и JSPM, он использует SystemJS в качестве загрузчика модулей, но, как и WebPack, он использует npm в качестве ресурса модулей. Наша проблема заключалась в том, что некоторые модули npm не предназначены для работы в браузере. Таким образом, они регистрируют ошибки при загрузке, хотя это не всегда влияет на их функциональность.

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

Философия

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

  • Скорость
  • Расширяемость
  • Простота

Турбо-старт (нулевая конфигурация)

Чтобы начать объединение, все, что вам нужно сделать, это

FuseBox.init({
  homeDir : “./src”,
  outFile : “./build/bundle.js”
})

Вот и все, теперь вы можете приступить к кодированию, и FuseBox сотворит чудеса. Приведенный выше код позволит вам объединить самые сложные проекты на Github, например, babel-core.

Модули Shimming npm

Некоторые библиотеки npm созданы для работы как в клиентской, так и в серверной среде, но некоторые нет, например, некоторые библиотеки зависят от модуля Node `process`, это не будет работать в браузере. поэтому мы позаботились о том, чтобы совместить все основные из них, чтобы они отлично работали на клиенте или, по крайней мере, не вызывали ошибок, если они предназначены для работы только в серверных средах. И если есть библиотека, которая нуждается в шиммировании, а мы ее еще не добавили, вы всегда можете отправить PR или легко сделать это самостоятельно в своем проекте с помощью одной замечательной функции custom modules folder. это действительно просто, проверьте прокладку для модуля URL https://github.com/fuse-box/fuse-box/blob/master/modules/url/index.js

TypeScript и Babel

Мы любим TypeScript, мы используем его ежедневно, но он действительно замедляется, когда у вас большой проект, поэтому мы очень много работали, чтобы он работал очень быстро и из коробки. Например, у нас есть проект с более чем 200 файлами, и благодаря интеграции FuseBox TypeScript мы смогли сократить время транспилирования с 5 секунд до 720 мс!

То же самое и с Babel, мы поддерживаем его как встроенный плагин, просто установите его и используйте любой из его плагинов, и он будет работать как шарм.

Связать что угодно

У нас есть встроенные плагины для большинства необходимых форматов файлов, которые нужны разработчику, пусть это будет HTML, CSS, SCSS, JSON и т. Д. Вот список всех встроенных плагинов, которые у нас есть на данный момент http: // fuse -box.org/#built-in-plugins.

API плагина FuseBox прост и интуитивно понятен. Отличным примером этого является случай, когда у нас был пользователь, которому требовалась возможность передавать некоторые переменные во время сборки как для клиентских, так и для серверных пакетов, поэтому мы создали EnvPlugin, который позволяет вам делать следующее:

plugins : [
  fsbx.EnvPlugin({ foo: “bar” })
]

Теперь вы можете получить доступ к своей переменной `foo` в своем коде, например, к этой` console.log (process.env.foo) `, и неважно, на клиенте вы или на сервере, вы даже можете использовать плагин с такими библиотеками, как Https://www.npmjs.com/package/safe-env. Это отличный пример, который показывает, как объединение FuseBox shimming модулей npm с API подключаемых модулей может дать потрясающие возможности.

Кеширование

FuseBox имеет мощную систему кеширования. Принцип работы кеширования заключается в том, что при первом запуске FuseBox создаст манифест всех модулей npm, которые вы используете в своем коде, а при последующем объединении Fuse будет извлекать эти модули из кеша и обрабатывать только ваш локальный код, это сократит процесс объединения. время безумно!

Fuse не только кэширует самые популярные модули, которые вы используете, он также кэширует зависимости каждого модуля, поэтому представьте, что в вашем коде требуется всего 100 модулей npm без кеширования, каждый раз, когда вы меняете одну строку в коде, вам придется повторно связать все эти модули.

Динамические модули

Это одна из лучших функций FuseBox, без которой мы не можем жить в наших проектах. Концепция динамических модулей проста, но очень эффективна. Идея здесь в том, что вы можете создавать модули во время выполнения, которые ведут себя так же, как модули, которые вы обычно пишете во время разработки. что это обозначает? Это означает, что вы можете легко написать свой код в виде строки, вы можете передать эту строку в автономный Babel или даже компилятор Typescript или просто написать код, совместимый с commonjs. Когда модуль будет готов, вы можете зарегистрировать его в FuseBox, вызвав FuseBox.dynamic, указав путь к модулю и исходную строку CommonJS. Теперь вы можете импортировать его, как любой другой модуль.

FuseBox.dynamic(“foo/bar.js”, “module.exports = {foo : ‘bar’}”)

Что еще более безумно, так это то, что FuseBox будет рассматривать его как собственный модуль, поэтому, если у вас есть операторы импорта реальных модулей npm или вашего локального кода внутри этого динамического модуля, FuseBox разрешит его правильно, и все будет работать как обычно. Подумайте о безумных возможностях! Чтобы получить больше информации о динамических модулях, ознакомьтесь с этой статьей



FuseBox и эпичность динамических модулей
В настоящее время динамические модули очень востребованы. FuseBox предлагает отличную поддержку для последних, предоставляя безграничные возможности… medium.com



Импорт подстановочных знаков

Вы когда-нибудь хотели загрузить несколько файлов с помощью одного оператора require? Мы тоже это сделали, поэтому встроили поддержку глобусов в функцию импорта FuseBox. Например, представьте, что у вас есть page-a в вашем проекте SPA, и вы группируете все его компоненты в папке с именем page-a/components, вы можете просто сделать следующее:

FuseBox.import(“./page-a/components/*-component”)

Команда импорта FuseBox теперь возвращает объект, содержащий эти компоненты:

{ 
   “page-a/components/carousle-component.js” : {code}, 
   “page-a/components/articles-component.js“ : {code} 
}

Что еще лучше, так это то, что вы можете загрузить любой формат файла, поддерживаемый FuseBox или любым из его плагинов, скажем, вы хотите загрузить все файлы JSON в config folder, тогда все, что вам нужно сделать, это следующее:

FuseBox.import(“./config/*.json”)

импорт относительно корня

Когда у нас есть сложное большое приложение, все является модульным, а структура папок становится глубокой и сложной. Представьте, что у вас есть следующий файл src/modules/module-a/validate/email.js и у вас есть служебная функция с именем toCamelCase в src/utils/toCamelCase, чтобы ссылаться на эту служебную функцию внутри email.js, обычно вам нужно сделать это

import {toCamelCase} from `../../../../utils/toCamelCase

Это некрасиво, но с FuseBox вы можете просто сделать

import {toCamelCase} from `~/utils/toCamelCase`

Намного лучше, правда?

Расширенные свойства метаданных

Если вы используете фон JAVA или. NET, это называется отражением. Удивительная функция, которая предоставляет вам доступ к полной информации о загруженном модуле, такой как имя файла, имя каталога, экспорт и т. Д., Что позволяет вам делать дикие вещи! Хорошим примером этого является то, что у вас есть соглашение о создании папки для каждого компонента и хранении файлов JavaScript, HTML и CSS рядом друг с другом, и вы хотите автоматически загружать файлы HTML и CSS при загрузке файла JavaScript вашего компонента. , ну, вас ждет удовольствие :) Мы можем легко создать декоратор, который сделает все это за вас автоматически следующим образом:

Теперь вы можете добавить этот декоратор к любому подобному компоненту.

@componentDecorator()
class MyComponent {
}

Бум! Fuse загрузит файл CSS компонента и добавит его в DOM, загрузит шаблон HTML, и теперь вы можете получить к нему доступ как к свойству в своем классе.

Выводы

Работать с FuseBox действительно приятно, благодаря ему теперь у нас есть больше времени для игр в видеоигры в офисе :) шутки в сторону, FuseBox - это действительно свежий взгляд на весь бизнес по загрузке и объединению модулей, это действительно спасло нас. Время и мозг работают, что делает его еще лучше, так это то, что никто не возражает против добавления новых функций или выхода за рамки того, что считается пределом для других.

Садись на

Это 4-минутное видео демонстрирует абсолютную простоту и мощь FuseBox, используемого с Typescript.

Эта статья лишь поверхностно отнеслась к тому, что такое FuseBox. FuseBox еще молод, но мы работаем над ним ежедневно, так что ждите еще большего, но пока что, если вам нравится проект, не забудьте разместить его на Github! И, конечно же, поделитесь информацией, нажав ♥, нам нужна ваша поддержка и отзывы :)

Присоединяйтесь к нашему gitter каналу, мы активны и очень дружны!