Статьи

Введение в FuseBox — более быстрая и простая альтернатива веб-пакета

Сентябрь 19, 2018

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

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

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

В этой статье мы собираемся использовать FuseBox, чтобы помочь вам выполнить общие задачи, связанные с разработкой приложения JavaScript. Это следующие:

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

Комплектация — базовый пример

Отказ от ответственности: я один из основных участников проекта.

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

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

Сначала создайте новую папку. Затем из командной строки перейдите к ней и введите следующее: npm init -y . Это инициализирует ваш проект. Затем введите npm install fuse-box -D , который установит FuseBox как зависимость для разработки.

Затем создайте папку с именем src куда будет идти весь ваш код. Кроме того, создайте файл index.js в папке src и добавьте в него следующее содержимое: 

 console.log('Hello world');

Затем создайте файл fuse.js в корне вашего проекта. Этот файл будет содержать всю вашу конфигурацию FuseBox.

На данный момент наша структура папок должна выглядеть примерно так: 

 MyProject ├── node_modules ├── src │ └── index.js ├── fuse.js └── package.json

Добавьте код ниже к fuse.js : 

 const { FuseBox } = require("fuse-box"); const fuse = FuseBox.init({ homeDir: "src", output: "dist/$name.js" }); fuse.bundle("app") .instructions("> index.js"); fuse.run();

Давайте разберем этот код раздел за разделом.

Во-первых, нам нужен FuseBox. Затем мы инициализируем новый экземпляр FuseBox с помощью метода init . Это также называется Producer в терминах FuseBox. Здесь мы определяем глобальную конфигурацию для всех пакетов.

Опция homeDir указывает FuseBox на домашний каталог наших файлов. Это потому, что FuseBox создает виртуальную файловую структуру, которая имитирует физическую структуру. Опция output сообщает FuseBox, где должен находиться наш выходной пакет. Обратите внимание на $name.js : это заполнитель, который будет заменен именем, которое вы $name.js для своего пакета.

Команда fuse.bundle("app") — это место, где мы сообщаем FuseBox о нашем пакете. Мы говорим FuseBox о создании пакета с именем app.js который будет находиться в папке dist вашего проекта. Конечный файл будет project/dist/app.js

В instructions('>index.js') мы сообщаем FuseBox, что мы хотим связать. Символ > — это то, что мы называем арифметической инструкцией : это язык, который FuseBox использует, чтобы узнать, какие файлы нужно связывать.

Команда fuse.run() указывает FuseBox запустить процесс связывания.

Теперь из командной строки введите node fuse.js — и все, готово! FuseBox начнет свою магию пакетирования и создаст пакет в dist/app.js

Полный пример доступен здесь .

Прозрачный TypeScript и ES6

То, что мы сделали до сих пор, приятно, но это не так много современных проектов JavaScript. Современные приложения разрабатываются с использованием ES6, который является шестым основным выпуском спецификации языка ECMAScript. ES6 великолепен: он позволяет использовать новые языковые функции, такие как классы , функции стрелок и многое другое. Проблема, однако, в том, что он еще не полностью поддерживается всеми версиями браузера или Node.js. Поэтому нам нужно преобразовать наш код в более распространенную поддерживаемую версию JavaScript, ES5.

Для этого есть два основных инструмента: Typescript и Babel. FuseBox поддерживает оба. Фактически, FuseBox построен с Typescript, поэтому поддерживает его изначально.

Чтобы начать работу с FuseBox и Typescript, сделайте следующее:

  • создать новый проект
  • с помощью командной строки перейдите в корень этого проекта и выполните npm init -y
  • создать папку src
  • внутри папки src добавьте index.ts
  • создать fuse.js в корне проекта
  • установить FuseBox и TypeScript в качестве зависимостей: npm install fuse-box typescript -D установить текстовый блок npm install fuse-box typescript -D .

В index.ts добавьте следующее: 

 const name: string = "FuseBox"; console.log(name);

Вам может быть интересно, что :string means . Это пример системы типов Typescript, сообщающий компилятору, что name переменной имеет тип string . Чтобы узнать больше о Typescript, посетите официальный сайт .

Добавьте следующее в fuse.js : 

 const { FuseBox } = require("fuse-box"); const fuse = FuseBox.init({ homeDir: "src", output: "dist/$name.js" }); fuse.bundle("app") .instructions("> index.ts"); fuse.run();

Обратите внимание, что все по-прежнему так же, как и раньше, с той лишь разницей, что мы используем .ts файлов .ts вместо .js в instructions('>index.ts') . Теперь, когда предварительные условия выполнены, введите в командной строке node fuse.js и FuseBox начнет связывание.

Полный пример доступен здесь .

Примечание. При использовании синтаксиса ES6 FuseBox автоматически определяет тип модуля и легко передает код. Нет необходимости в Вавилоне. FuseBox качается!

Загрузка модуля

До сих пор мы делали простые примеры console.log . Давайте сделаем еще один шаг и начнем изучать загрузку модуля. Модули — это дискретные единицы независимого, многократно используемого кода. В JavaScript есть много способов создания модулей.

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

Основываясь на нашем примере Typescript, давайте создадим несколько модулей и начнем их использовать. Поскольку мы используем TypeScript, мы будем использовать систему модулей ES6.

В папке src рядом с index.ts создайте hello.ts и добавьте в него следующее: 

 export function hello(name: string) { return `Hello ${name}`; }

В index.ts добавьте следующее: 

 import { hello } from "./hello"; const name: string = `Mr. Mike`; console.log(hello(name));

Теперь из командной строки введите node fuse.js , затем node dist/app.js Вы должны увидеть следующее записанное на вашей консоли: 

  Hello Mr. Mike

Поздравляем! Вы только что создали и загрузили свой первый модуль с FuseBox, ES6 и Typescript. ?

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

В командной строке введите npm install moment -S . Эта команда устанавливает пакет Moment.js как зависимость вашего проекта. Теперь добавьте следующее в ваш index.ts : 

 import {hello} from "./hello"; import * as moment from "moment" const time = moment().format('MMMM Do YYYY, h:mm:ss a'); const name: string = `Mr. Mike`; console.log(hello(name)); console.log(time);

Если вы сейчас введете node fuse.js , а затем node dist/index.js , вы должны увидеть в консоли следующую информацию (хотя дата, очевидно, будет другой): 

 Hello Mr. Mike March 7th 2018, 11:50:48 am

Полный пример доступен здесь .

Работа с плагинами

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

До сих пор мы работали исключительно с файлами JavaScript и TypeScript. Теперь пришло время копнуть глубже и начать использовать плагины FuseBox. Мы начнем с использования двух важных плагинов: CSSPlugin и SassPlugin .

Давайте сделаем обычное:

  • создать новый проект
  • с помощью командной строки перейдите в корень этого проекта и выполните npm init -y
  • создать папку src
  • внутри папки src добавьте index.ts
  • внутри папки src добавьте main.css
  • внутри папки src добавьте extra.scss
  • создать fuse.js в корне проекта
  • установите FuseBox, TypeScript и компилятор Sass в качестве зависимостей, введя в командной строке следующее: npm install fuse-box typescript node-sass -D .

Обратите внимание на файл extra.scss : здесь мы напишем наш Sass . Конечно, браузеры изначально не поддерживают Sass, поэтому мы будем использовать FuseBox SassPlugin . Ваш fuse.js должен выглядеть так: 

 const { FuseBox, CSSPlugin, SassPlugin } = require("fuse-box"); const fuse = FuseBox.init({ homeDir: "src", output: "dist/$name.js", plugins: [ [SassPlugin(), CSSPlugin()], CSSPlugin() ] }); fuse.bundle("app") .instructions(`> index.ts`); fuse.run();

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

Далее давайте добавим некоторый контент в файлы таблиц стилей.

В main.css добавьте это: 

 body { margin: 0; font-family: Verdana, Geneva, Tahoma, sans-serif; background: #ececec; }

В extra.scss добавьте это: 

 $font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }

Теперь давайте импортируем эти файлы стилей для обработки и комплектации. В вашем index.ts добавьте это: 

 import "./main.css"; import "./extra.scss"; document.body.innerHTML = ` <div class="content"> <h1>Welcome to FuseBox!</h1> </div>`;

В отличие от других решений, FuseBox позволяет импортировать файлы, отличные от JavaScript, без каких-либо дополнительных обходных путей . Теперь FuseBox запустит SassPlugin, чтобы скомпилировать Sass в CSS и связать как main.css и extra.scss . Тем не менее, как мы можем просмотреть результат? Сейчас самое время представить еще один крутой встроенный плагин под названием WebIndexPlugin .

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

Ваш fuse.js должен выглядеть так: 

 const { FuseBox, CSSPlugin, SassPlugin, WebIndexPlugin } = require("fuse-box"); const fuse = FuseBox.init({ homeDir: "src", output: "dist/$name.js", plugins: [ [SassPlugin(), CSSPlugin()], CSSPlugin(), WebIndexPlugin({path: "."}) ] }); fuse.bundle("app") .instructions(">index.ts"); fuse.run();

Из командной строки запустите node fuse.js , и теперь FuseBox сгенерирует index.html в папке dist . Откройте этот файл, и вы увидите, что ваш CSS применяется к странице.

Теперь, в вашем main.css , попробуйте изменить background: #ececec; строки background: #ececec; на background: blue; , В командной строке введите node fuse.js , обновите страницу в браузере, и вы увидите, что ваша страница теперь имеет синий фон.

Обратите внимание, что мы должны вводить node fuse.js каждый раз, когда мы вносим изменения в наш код и хотим видеть результат. Это не разумный способ работать, верно? Для решения этой проблемы у FuseBox есть метод watch . Метод watch инструктирует FuseBox автоматически перегруппировать при любом изменении файла.

Давайте добавим часы в наш комплект. Теперь fuse.js должен выглядеть так: 

 const { FuseBox, CSSPlugin, SassPlugin, WebIndexPlugin } = require("fuse-box"); const fuse = FuseBox.init({ homeDir: "src", output: "dist/$name.js", plugins: [ [SassPlugin(), CSSPlugin()], CSSPlugin(), WebIndexPlugin({path: "."}) ] }); fuse.bundle("app") .watch() .instructions(">index.ts"); fuse.run();

В командной строке введите node fuse.js , затем измените любой из ваших файлов. Вы увидите, что FuseBox автоматически перегруппируется для вас без необходимости вручную вводить node fuse.js

Полный пример доступен здесь .

Горячая перезагрузка модуля (HMR)

Горячая перезагрузка модулей (HMR) позволяет FuseBox обнаруживать, когда файлы были изменены, и обновлять эти модули в памяти, что означает, что представление в браузере также обновляется. Это действительно довольно мощная функция! Прошли те времена, когда вы должны переключаться между вашим редактором и браузером, нажимая F5, чтобы увидеть изменения. В отличие от некоторых других решений, FuseBox HMR работает со всеми вашими файлами и не ограничивается файлами JavaScript . Проще говоря: измените код, сохраните, и FuseBox автоматически обновит ваш проект, показывая обновленное приложение в браузере.

Пока мы говорим о FuseBox HMR, сейчас самое время представить встроенный сервер разработки FuseBox. Это полноценное приложение Express, что означает, что вы можете создавать маршруты, добавлять промежуточное программное обеспечение и т. Д. Ознакомьтесь с полной документацией, чтобы получить больше информации.

Основываясь на последнем примере, обновите файл fuse.js чтобы он выглядел так: 

 const { FuseBox, CSSPlugin, SassPlugin, WebIndexPlugin } = require("fuse-box"); const fuse = FuseBox.init({ homeDir: "src", output: "dist/$name.js", plugins: [ [SassPlugin(), CSSPlugin()], CSSPlugin(), WebIndexPlugin({path: "."}) ] }); fuse.dev(); fuse.bundle("app") .instructions("> index.ts") .watch() .hmr(); fuse.run();

Обратите внимание, что мы добавили две дополнительные команды: fuse.dev() и .hmr() . Это все, что вам нужно, чтобы включить HMR с FuseBox. В командной строке введите node fuse.js , и в консоли вы увидите следующее сообщение: server running http://localhost:4444 .

Это URL, который FuseBox предоставит вам для доступа к вашему проекту. Перейдите по адресу http: // localhost: 4444 / и начните изменять некоторые файлы CSS или JavaScript. Вы увидите изменения, отраженные сразу в браузере без единого обновления!

Полный пример доступен здесь .

Познакомьтесь со Sparky, встроенным в Runner

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

Помните, когда мы говорили, что FuseBox — единственный инструмент, который вам нужен для ваших требований к разработке? Ну вот, мы начинаем видеть, как это утверждение сбывается. FuseBox имеет встроенный бегунок задач под названием Sparky ( подробнее об этом можно прочитать здесь ). По умолчанию он охватывает общие задачи, упомянутые ранее, но его можно легко расширить с помощью плагинов, чтобы охватить еще несколько пользовательских задач.

Основываясь на последнем примере, давайте создадим следующее:

  • задача, которая очищает папку dist каждый раз, когда вы запускаете процесс связывания
  • задача, которая копирует файлы изображений из папки src при каждом добавлении, редактировании или удалении любого из этих изображений.

Основываясь на последнем примере, ваш fuse.js должен выглядеть так: 

 const { FuseBox, CSSPlugin, SassPlugin, WebIndexPlugin, Sparky } = require("fuse-box"); const fuse = FuseBox.init({ homeDir: "src", output: "dist/$name.js", plugins: [ [SassPlugin(), CSSPlugin()], CSSPlugin(), WebIndexPlugin({path: "."}) ] }); fuse.dev(); fuse.bundle("app") .instructions("> index.ts") .watch() .hmr(); Sparky.task("clean", () => { return Sparky.src("dist").clean("dist"); }); Sparky.task("watch:images", () => { return Sparky.watch("**/*.+(svg|png|jpg|gif)", {base: "./src"}) .dest("./dist"); }); Sparky.task("default", ["clean", "watch:images"], () => { fuse.run(); });

Давайте посмотрим, что здесь нового. Сначала нам требуется Sparky, затем мы создали три задачи. Задача по default — это соглашение, которое использует Sparky, и оно будет автоматически выполнено при запуске node fuse.js Обратите внимание, что у нас есть ["clean", "watch:images"] в определении задачи по default . Это пример потока выполнения Sparky. Sparky имеет два режима: waterfall и parallel . В режиме « waterfall » задачи будут выполняться последовательно, что означает, что вышеуказанная задача watch:images не будет выполняться до тех пор, пока не будет выполнена clean задача.

Также обратите внимание, что мы переместили fuse.run к fuse.run по default . Это важно, так как мы хотим убедиться, что пакетирование начнется после завершения других задач.

Вторая clean задача очень проста: мы используем clean метод для удаления папки dist .

Третье watch:images задание watch:images отвечает за копирование изображений. Sparky.watch — это встроенный метод Sparky.watch который Sparky.watch каждый раз, когда в вашей папке происходят изменения. "**/*.+(svg|png|jpg|gif)" — это файловый глобус, который сообщает Sparky, чтобы он просматривал все эти форматы файлов изображений в нашей папке src . Метод .dest говорит Sparky скопировать любой из измененных файлов в папку dist .

Добавьте несколько изображений в вашу папку src и запустите node fuse.js Sparky теперь удалит все файлы в папке dist и скопирует все изображения из папки src папку dist . Теперь попробуйте отредактировать любое изображение в папке src и вы увидите, что средство просмотра файлов Sparky включится и скопирует этот файл в папку dist .

Полный пример доступен здесь .

Модульное тестирование

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

FuseBox поставляется со встроенным тестером. Он построен на том же движке, который Fusebox использует для связывания, что означает, что он получает выгоду от всего, что есть у FuseBox — скорости, кэширования, плагинов и т. Д. Во-вторых, он использует Typescript по умолчанию, что означает, что вам не нужно ничего связывать; это просто работает.

Давайте сделаем обычное:

  • создать новый проект
  • перейдите в командной строке к корню этого проекта и выполните npm init
  • создать папку src
  • внутри папки src добавьте index.ts
  • внутри папки src добавьте index.test.ts
  • создать fuse.js в корне проекта
  • установите FuseBox, babel-runtime и TypeScript в качестве зависимостей, выполнив в командной строке следующее: npm install fuse-box fuse-test-runner babel-runtime typescript -D .

Ваш fuse.js должен выглядеть так: 

 const { FuseBox } = require("fuse-box"); const fuse = FuseBox.init({ homeDir: "src", output: "dist/$name.js" }); fuse.dev(); fuse.bundle("app") .instructions("> index.ts") .watch() .hmr(); fuse.run(); fuse.bundle("app").test("[**/**.test.ts]");

Конфиг все тот же. Мы просто добавили одну дополнительную строку: fuse.bundle("app").test("[**/**.test.ts]"); , Эта строка указывает FuseBox запускать любые тестовые файлы, заканчивающиеся на .test.ts .

В index.ts добавьте это: 

 export const count = 1; export function calculate(num) { return num + 1; }

В index.test.ts добавьте это: 

 import { should } from "fuse-test-runner"; import { count, calculate } from "./index"; export class BarTest { "Should be okay"() { should(count).beOkay(); } "Should equal 2"() { should(calculate(count)) .equal(2); } "Should not equal 2"() { should(calculate(5)) .equal(2); } }

Давайте посмотрим на то, что мы делаем здесь:

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

Давайте возьмем первый тест Should be okay . Здесь мы просто хотим проверить, что переменная count не является пустой или неопределенной. Для этого мы используем should(count).beOkay(); , Мы начинаем любое утверждение с метода should , который принимает переменные, функции, объекты и выражения. Затем мы используем одно из встроенных утверждений. В приведенном выше примере мы используем beOkay , который утверждает, что переменная count не является пустой или неопределенной.

Во втором тесте, который Should equal 2 , мы передаем значение count функции calculate и утверждаем, что возвращается правильный результат.

В третьем тесте, который Should not equal 2 , мы намеренно пытаемся заставить тест провалиться, передав число 5 , в результате чего получаем значение 6 , которое не равно ожидаемому значению 2 .

Теперь запустите node fuse.js и вы увидите в своей консоли, что первые два теста пройдены, а третий — неудачен.

Модульное тестирование

Полный пример доступен здесь .

Развитие против производственных сред

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

Давайте сделаем обычное:

  • создать новый проект
  • перейдите в командной строке к корню этого проекта и выполните npm init -y
  • создать папку src
  • внутри папки src добавьте index.ts
  • внутри папки src добавьте calc.ts
  • внутри папки src добавьте calc.test.ts
  • внутри папки src добавьте main.css
  • внутри папки src добавьте extra.scss
  • создать fuse.js в корне проекта
  • установите FuseBox, Sass, UglifyJS, babel-runtime и TypeScript в качестве зависимостей, запустив в командной строке следующее: npm install fuse-box fuse-test-runner babel-runtime typescript node-sass uglify-js -D .

Добавьте следующее в fuse.js : 

 const { FuseBox, CSSPlugin, SassPlugin, WebIndexPlugin, UglifyJSPlugin, Sparky } = require("fuse-box"); let fuse, app, vendor, isProduction = false; Sparky.task("config", () => { fuse = FuseBox.init({ homeDir: "src", output: "dist/$name.js", hash: isProduction, sourceMaps: !isProduction, plugins: [ [SassPlugin(), CSSPlugin()], CSSPlugin(), WebIndexPlugin({path: "."}), isProduction && UglifyJSPlugin() ] }); // vendor should come first vendor = fuse.bundle("vendor") .instructions("~ index.ts"); // out main bundle app = fuse.bundle("app") .instructions(`!> [index.ts]`); if (!isProduction) { fuse.dev(); } }); // development task "node fuse"" Sparky.task("default", ["config"], () => { vendor.hmr().watch(); app.watch(); return fuse.run(); }); // Dist task "node fuse dist" Sparky.task("dist", ["set-production", "config"], () => { return fuse.run(); }); Sparky.task("set-production", () => { isProduction = true; return Sparky.src("dist/").clean("dist/"); }); Sparky.task("test", ["config"], () => { return app.test(); });

Вышеприведенное может показаться слишком сложным, но не беспокойтесь: как только мы разберем его, вы поймете, насколько он мощный и простой.

Концепция остается прежней, но мы добавили новую переменную isProduction . Это установит условие, определяющее, должен ли Fusebox создавать пакет разработки или производства для вас.

Затем есть свойство hash для объекта, который мы передаем в FuseBox.init() , для которого установлено значение isProduction . Это функция хеширования FuseBox, которая важна для управления выпусками. Это позволяет нам аннулировать кэш браузера при обслуживании новой версии нашего приложения, что в свою очередь гарантирует, что наши пользователи получат последнюю версию нашего приложения. При включенном хешировании FuseBox будет генерировать хеш-имя файла для каждого пакета каждый раз, когда мы запускаем процесс объединения. Например: 

 d72d7ad8-app.js b841f28-vendor.js

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

В свойстве plugins обратите внимание на следующую строку: isProduction && UglifyJSPlugin() . Это выражение JavaScript, которое означает, что если переменная isProduction значение true , примените UglifyJSPlugin .

Далее мы создаем пакет vendor . Идея пакета vendor состоит в том, чтобы отделить ваш локальный код от внешних пакетов и зависимостей. Это учитывает модульный подход и менее повторяющийся код в связках. Обратите внимание, что в .instructions("~ index.ts" ) символ ~ является арифметическим символом FuseBox, который инструктирует FuseBox извлечь все внешние зависимости, игнорируя фактические файлы проекта. Проще говоря, это объединит все ваши внешние зависимости (пакеты npm) минус ваш локальный код.

Двигаясь дальше, мы создаем основной комплект. Обратите внимание на символы !> В .instructions("!> [index.ts]") . Опять же, это арифметические символы. ! поручает FuseBox удалить API загрузчика из пакета (поскольку мы уже включили его в пакет поставщика). Символ > указывает FuseBox автоматически выполнять файл при загрузке.

Задачи

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

Давайте начнем с задачи по default . Обратите внимание, что мы включили HMR внутри него с помощью vendor.hmr().watch() . Мы сделали это, потому что задание по умолчанию предназначено для нашей среды разработки, поэтому isProduction здесь false .

Задача set-production заключается в том, чтобы установить для переменной isProduction значение true .

Задача dist , с другой стороны, нацелена на нашу производственную среду. Следовательно, это зависит от задач set-production и config . Это означает, что задача dist не будет запущена до тех пор, пока не будет завершена задача set-production , которая, в свою очередь, не будет запущена, пока не завершится задача config .

Наконец, test задача, которая просто выполняет тесты, которые мы определили в наших проектах.

Теперь давайте посмотрим все это в действии. В командной строке запустите node fuse.js Вы заметите, что FuseBox делает следующее:

  • запускает процесс комплектации
  • запускает сервер разработки
  • запускает HMR
  • каждый раз, когда мы меняем наш код, HMR и процесс объединения включаются снова.

Но как насчет производства?

Не бойся! Если мы запустим node fuse.js dist (обратите внимание на параметр dist ), FuseBox сделает следующее:

  • начать процесс комплектации.

Там не работает ни HMR, ни dev-сервер. Это потому, что мы в производственном режиме. Откройте папку dist и вы увидите, что FuseBox генерирует ваши пакеты со случайными именами. Откройте любой из этих пакетов, и вы увидите, что ваш код выглядит забавно. Это потому, что FuseBox минимизировал ваш код с помощью UglifyJSPlugin . Если вы сравните размер ваших пакетов между разработкой и производственным режимом, вы увидите разницу!

Наконец, если вы хотите запустить свои тесты, из командной строки запустите node fuse.js test

Полный пример доступен здесь .

Легкая альтернатива Webpack

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

Наше сообщество на Gitter растет, мы очень дружелюбны и помогаем! Если вам нравится проект, не забудьте добавить наш репозиторий GitHub и подписаться на нас в Twitter . В противном случае, если у вас есть какие-либо вопросы или комментарии, пожалуйста, не стесняйтесь оставлять их в комментариях ниже.

Эта статья была рецензирована Домиником Майерсом . Спасибо всем рецензентам SitePoint за то, что сделали контент SitePoint как можно лучше!

45
Share: