的WebPack已經毫無爭議地成為了事實上的JavaScript模塊捆綁，但它有一個被混亂和難學的聲譽。 在這篇文章中，我想提出一個更快，更簡單的WebPack選擇- 保險絲盒 。

在當今快速發展的前端景觀，這是至關重要的有JavaScript的模塊系統扎實抓好。 模塊可以幫助組織你的代碼，使之更容易維護和提高其可重用性。 不幸的是， 對于ES模塊瀏覽器的支持是還沒有應用，所以你總是需要一個模塊捆綁到它們拼接成可以傳遞到瀏覽器的一個文件。

保險絲盒是一個工具下一代的生態系統，可以為所有的開發生命周期的要求。 它使開發人員能夠捆綁任何文件格式，它是一個模塊加載，一個transpiler，一個任務運行等等。

在這篇文章中，我們將使用保險絲盒來引導您參與開發JavaScript應用程序的共同任務。 這些措施如下：

• 捆綁 ：定義一個入口點和包名稱
• transpiling ：寫在打字稿和目標ES5
• 加載模塊 ：結合您的模塊集成到一個單一的文件
• 處置其他資產 ：使用保險絲盒插件編譯薩斯
• 熱模塊重裝（HMR） ：看你的項目自動更新以反映更改
• 任務運行 ：介紹了斯帕克，保險絲盒的內置任務運行
• 單元測試 ：介紹了保險絲盒的內置測試運行
• 針對生產 ：生產部署一個精縮，變丑束。

一旦你讀完，你就可以放棄保險絲盒到您的下一個項目，并從它的速度，簡單性和靈活性中受益。

捆綁 - 一個基本的例子

免責聲明：我的核心貢獻者項目之一。

項目變得越來越大 - 這是一個事實。 如果我們通過一個包括所有由一個頁面所需要的文件，這會使事情變得相當慢，因為瀏覽器將不得不作出了一堆阻止HTTP請求。 捆綁解決了這個問題，并減少文件的數量要求和保險絲盒使這一過程盡可能容易。

要開始捆綁，我們還要教保險絲盒約我們想要的。 保險絲盒不配置的方式捆綁重項目太多需要。 事實上，配置十線通常足以滿足大多數使用情況。 不過，在我們開始進入一些真實世界的例子，讓我們創建簡單的東西。

首先，創建一個新的文件夾。 然后，從您的命令行，導航到它，并輸入以下內容： npm init -y 。 這將初始化項目。 然后鍵入npm install fuse-box -D ，這將安裝保險絲盒作為發展的依賴。

接下來創建一個文件夾，名為src這是所有你的代碼會去。 此外，創建index.js在文件中src文件夾，并添加以下內容到它：

 console.log('Hello world');
 

接下來，創建一個fuse.js在項目的根文件。 此文件將包含所有的保險絲盒的配置。

在這一點上，我們的文件夾結構應該是這個樣子：

 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();
 

我們把這個代碼下逐節。

首先，我們需要保險絲盒。 然后，我們用初始化保險絲盒的新實例init方法。 這也被稱為Producer在保險絲盒條款。 這就是我們定義的所有包的全局配置。

在homeDir選項指出保險絲盒給我們的文件的主目錄。 這是因為保險絲盒創建一個虛擬文件結構模仿物理之一。 在output選項告訴保險絲盒在那里我們輸出束應駐留。 注意$name.js ：這是將與您提供給您的包名替換的占位符。

命令fuse.bundle("app")是我們告訴保險絲盒我們的包。 我們告訴保險絲盒，以創建一個名稱的包app.js將駐留在dist在項目文件夾。 最終文件將project/dist/app.js 。

該instructions('>index.js')的部分是我們告訴保險絲盒我們希望捆綁。 符號>就是我們所說的算術指令 ：它是語言保險絲盒的用途，了解哪些文件需要被捆綁在一起。

命令fuse.run()告訴保險絲盒，開始捆綁過程。

現在，從您的命令行中輸入node fuse.js -這就是它，你就大功告成了！ 保險絲盒，現在將開始捆綁魔術和創造在束dist/app.js 。

在完整的例子可以在這里找到 。

Transpiling打字稿和ES6

我們到目前為止已經完成的很不錯，但是這是現代的JavaScript項目不會有多少開發。 今天的應用程序正在使用ES6，這是ECMAScript語言規范的第六個重要版本開發。 ES6是偉大的：它使新的語言功能，如類 ， 箭頭的功能等等。 但問題是，它沒有完全被所有的瀏覽器或Node.js的版本支持呢。 因此，我們需要transpile我們的代碼為JavaScript，ES5的一種較為常見的支持的版本。

有兩個主要的工具來實現這一點：打字稿和巴貝爾。 保險絲盒支持。 事實上，保險絲盒是建立與打字稿，從而支持它本身。

要開始使用熔斷器盒和打字稿，做到以下幾點：

• 創建一個新項目
• 使用命令行，導航到該項目的根，并做npm init -y
• 創建一個src文件夾
• 里面src文件夾，添加index.ts
• 創建fuse.js在項目的根
• 安裝保險絲盒和打字稿的依賴關系： npm install fuse-box typescript -D 。

在index.ts ，添加以下內容：

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

你可能想知道:string means 。 這是打字稿的類型系統的一個例子，告訴編譯器變量name的類型為string 。 要了解更多關于打字稿，檢查官方網站 。

以下內容添加到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文件格式，而不是.js中的instructions('>index.ts') 現在的先決條件到位，從您的命令行輸入node fuse.js和保險絲盒將開始捆綁。

在完整的例子可以在這里找到 。

注意：當使用ES6語法，保險絲盒將自動檢測模塊類型和無縫transpile的代碼。 無需巴貝爾。 保險絲盒石頭！

模塊加載

到目前為止，我們一直在做的只是簡單的console.log例子。 讓我們把它更進了一步，并開始學習模塊加載。 模塊是獨立的，可重用的代碼謹慎的單位。 在JavaScript中有許多方法來創建模塊。

保險絲盒捆綁你的代碼到CommonJS的模塊格式。 不幸的是，這不是在瀏覽器支持。 但是，沒有必要擔心：保險絲盒有你的背部和提供了一個全面的API，使在瀏覽器中的微風模塊工作。

我們的打字稿例如建筑，讓我們創建一些模塊，并開始使用。 由于我們使用的是打字稿，我們將使用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
 

恭喜！ 您剛剛創建，并與保險絲盒，ES6和打字稿加載你的第一個模塊。 :)

我們已經學會了如何加載本地模塊，但是保險絲盒可與外部節點包了。 因此，讓我們擴展這個例子，說明如何通過包括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
 

在完整的例子可以在這里找到 。

與插件工作

工具沒有生態系統能夠滿足所有用戶的所有需求，而且保險絲盒也不例外。 盡管保險絲盒提供了廣泛的功能開箱即用，還有那豐富這個生態系統與真棒新的插件開發人員一個活躍的社區。

到目前為止，我們已經完全使用JavaScript和打字稿文件的工作。 現在是時候深入挖掘，并開始使用保險絲盒插件。 ：我們將使用兩個重要的插件開始CSSPlugin和SassPlugin 。

讓我們做平常：

• 創建一個新項目
• 使用命令行，導航到該項目的根，并做npm init -y
• 創建一個src文件夾
• 里面src文件夾添加index.ts
• 里面src文件夾添加main.css
• 里面src文件夾添加extra.scss
• 創建fuse.js在項目的根
• 從您的命令行中輸入下面安裝保險絲盒，打字稿和薩斯編譯器的依賴關系： npm install fuse-box typescript node-sass -D 。

注意文件extra.scss文件：這就是我們寫我們的無禮 。 當然，瀏覽器本身不支持無禮的話，這就是為什么我們將使用保險絲盒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在上面重復兩次。 這是因為在保險絲盒一個重要的概念叫做插件鏈接 。 這個概念真的很強大，因為它使保險絲盒一個插件的結果反饋到下一個。

接下來，讓我們添加一些內容到樣式表文件。

在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>`;
 

不像其他的解決方案在那里， 保險絲盒，可以導入不是JavaScript其他文件，而無需任何額外的解決方法 。 現在，保險絲盒將運行SassPlugin編譯成的Sass CSS和捆綁兩個main.css和extra.scss你。 然而，我們如何預覽結果？ 現在是一個好時機，推出內置插件叫做另一個很酷的WebIndexPlugin 。

在這里，我們有保險絲盒如何讓開發者的生活更輕松的另一個例子。 這個插件自動生成一個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 ，現在保險絲盒將生成index.html在dist文件夾中。 打開這個文件，你會看到你的CSS應用到該頁面。

現在，在您main.css ，嘗試改變行background: #ececec; 到background: blue; 。 在命令行中輸入node fuse.js ，刷新頁面在瀏覽器中，你會看到你的頁面現在有一個藍色的背景。

請注意，我們要進入node fuse.js每次我們作出改變我們的代碼，并希望看到的結果的時間。 這不是一個明智的方式來工作的，不是嗎？ 為了解決這個問題，保險絲盒有一個手表的方法 。 該watch方法指示保險絲盒在任何文件中的變化自動重新捆綁。

讓我們添加的手表到我們的包。 現在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 ，然后修改任何文件。 系統會自動顯示保險絲盒重新捆綁你無需輸入node fuse.js手動。

在完整的例子可以在這里找到 。

熱模塊重新加載（HMR）

熱模塊重新加載（HMR）允許保險絲盒時的文件已被更改，以檢測并在存儲器中更新這些模塊，這意味著在瀏覽器中的視圖也被更新。 這是一個非常非常強大的功能！ 飄的日子，你必須編輯器和瀏覽器之間進行切換，按F5查看更改。 不像一些其他的解決方案， 保險絲盒HMR適用于所有文件和文件不限于JavaScript文件 。 簡單來說：改變你的代碼，保存和保險絲盒會自動更新你的項目給你，顯示在瀏覽器更新的應用程序。

當我們談論保險絲盒HMR，它的引入保險絲盒內置的一個好時機開發服務器 。 這是一個完整的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與保險絲盒。 從您的命令行中輸入node fuse.js ，你會在控制臺看到以下消息： server running http://localhost:4444 。

這是URL保險絲盒會給你訪問你的項目。 頭以上的http：//本地主機：4444 / ，并開始改變一些你的CSS或JavaScript文件。 你會看到在瀏覽器中立即反映出來的變化沒有一個單一的刷新！

在完整的例子可以在這里找到 。

符合斯帕克，內置的任務運行

到目前為止，我們已經處理捆綁的文件，但大多數項目通常需要執行一些額外的任務，如清理文件夾，復制文件，增加應用程序的版本等等。

還記得我們說，保險絲盒是你需要為你的開發要求的唯一工具嗎？ 好了，我們開始看到這個說法應驗。 保險絲盒有一個內置的所謂任務運行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任務定義。 這是斯帕克的執行流程的一個例子。 斯帕克有兩種模式： waterfall和parallel模式。 在waterfall模式，任務會按順序執行，這意味著上述watch:images ，直到任務將不會被執行clean任務完成。

還要注意，我們搬到fuse.run到default任務。 這一點很重要，因為我們希望確保其他任務完成后捆綁開始。

第二clean任務非常簡單：我們使用clean方法去除dist文件夾。

第三個watch:images任務是負責將影像復制。 Sparky.watch是一個內置的文件觀察者方法，將在每一個有你的文件夾中的變化的時間踢。 在"**/*.+(svg|png|jpg|gif)"是一個文件名匹配，告訴斯帕克觀看所有這些圖像文件格式，在我們src文件夾中。 該.dest方法告訴Sparky的任何更改的文件復制到dist文件夾。

一些圖像添加到您src文件夾，然后運行node fuse.js 。 斯帕克現在將清除所有文件的dist的文件夾，并在所有的圖片拷貝src文件夾復制到dist文件夾。 現在嘗試編輯在任何圖像src文件夾，你會看到Sparky的文件觀察者會踢和文件復制到dist文件夾。

在完整的例子可以在這里找到 。

單元測試

測試是最強大的工具，我們所知道的提高軟件質量。 測試減少錯誤，提供準確的資料，并改進設計。

保險絲盒配備了一個內置的測試運行 。 它是建立在相同的發動機保險絲盒的用途之上捆綁，這意味著它從一切保險絲盒具有優勢 - 速度，緩存，插件等。其次，它使用打字稿默認情況下，這意味著你不必絲什么; 它只是工作。

讓我們做平常：

• 創建一個新項目
• 導航在命令行這個項目的根，并做npm init
• 創建一個src文件夾
• 里面src文件夾，添加index.ts
• 里面src文件夾，添加index.test.ts
• 創建fuse.js在項目的根
• 從您的命令行執行以下操作安裝保險絲盒，巴貝爾，運行時間和打字稿的依賴關系： 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]"); 。 這條線指示保險絲盒運行任何測試文件，與兩端.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 ，你會在控制臺中看到，前兩個測試通過了，第三個失敗。

在完整的例子可以在這里找到 。

開發與生產環境

我們已經經歷了重大的保險絲盒的概念，但通常你必須為您的開發和生產環境的不同要求。 例如，你不會運送您的捆綁代碼啟用HMR。 為了幫助你，我們會通過推薦的設置，將滿足開發和生產的要求走。

讓我們做平常：

• 創建一個新項目
• 在命令行中定位到該項目的根，并做npm init -y
• 創建一個src文件夾
• 里面src文件夾，添加index.ts
• 里面src文件夾，添加calc.ts
• 里面src文件夾，添加calc.test.ts
• 里面src文件夾，添加main.css
• 里面src文件夾，添加extra.scss
• 創建fuse.js在項目的根
• 通過運行您的命令行下面安裝保險絲盒，薩斯，UglifyJS，巴貝爾，運行時間和打字稿的依賴關系： 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 。 這將設置定義保險絲盒是否應該創建一個開發或產品包為你的條件。

然后有一個hash我們傳遞給對象的屬性FuseBox.init()它被設置為值isProduction 。 這是保險絲盒的散列功能，用于管理排放的重要。 它使我們能夠為我們的應用程序的新版本，其在收益保證，我們的用戶將獲得最新版本的我們的應用程序時失效瀏覽器緩存。 啟用散列，保險絲盒會為每捆每次我們開始捆扎處理時間文件哈希名。 例如：

 d72d7ad8-app.js
b841f28-vendor.js
 

當我們進入生產，我們需要我們的代碼是小和高性能成為可能。 我們以縮小文件與捆綁實現這一UglifyJSPlugin我們加入。

在plugins屬性，注意以下行： isProduction && UglifyJSPlugin() 這是一個JavaScript表達這意味著如果isProduction變量計算true ，則應用UglifyJSPlugin 。

接下來，我們創建一個vendor捆綁。 一個背后的想法vendor捆綁是從外部包和依賴分離當地的規范。 這允許束內的模塊化方法和較少重復的代碼。 請注意，在.instructions("~ index.ts" ），在~符號是保險絲盒算術符號指示保險絲盒提取所有外部依賴，忽略了實際的項目文件。 簡單地說，這將捆綁所有的外部依賴（NPM包）減去當地的規范。

移動的，我們創建了主束。 注意!>在符號.instructions("!> [index.ts]") 同樣，這些是算術符號。 該! 指示保險絲盒，以去除捆綁裝載機API（因為我們已經在供應商捆綁包括它）。 所述>符號指示保險絲盒自動執行負載的文件。

任務

解釋的最后一件事是我們的任務。 請注意，我們甚至包裹我們的配置中config了自己的任務。 這使得我們可以用它在其他任務，而無需重復自己或污染我們的代碼。

讓我們從一開始就default任務。 請注意，我們啟用HMR內配置有vendor.hmr().watch() 我們這樣做，因為默認的任務是要針對我們的開發環境，因此isProduction是false這里。

該set-production任務，是我們設定的isProduction變量為true 。

該dist任務，在另一方面，是要針對我們的生產環境。 因此，它是依賴于set-production和config任務。 這意味著， dist任務將無法運行，直到set-production任務已完成，這反過來將不會運行，直到config任務已完成。

最后是test任務，它只是執行我們已經在我們的項目中定義的測試。

現在，讓我們看到這一切行動。 從你的命令行，運行node fuse.js 。 你會發現，保險絲盒具有下列功能：

• 開始捆綁過程
• 啟動開發服務器
• 開始HMR
• 每一次我們改變我們的代碼HMR和捆綁的過程將再次一命嗚呼

但對于生產？

從不畏懼！ 如果我們運行node fuse.js dist （通知dist參數），保險絲盒執行以下操作：

• 啟動捆綁的過程。

有沒有HMR或dev的服務器上運行。 這是因為我們的生產模式。 打開你的dist文件夾，你會看到，保險絲盒產生的包隨機名稱。 打開任一包的，你會看到你的代碼看起來很滑稽。 這是因為保險絲盒使用的精縮代碼UglifyJSPlugin 。 如果你比較開發和生產模式之間的束的大小，你會看到其中的差別！

最后，如果你想運行測試，在命令行中運行node fuse.js test 。

在完整的例子可以在這里找到 。

一個輕量級的替代的WebPack

正如我們所看到的，我們能夠完全覆蓋了現代開發工作流程的所有要求 - 從開發到生產 - 只用保險絲盒。 有很多，你逛逛圖書館，你會發現更多的高級選項和概念，但希望本文將幫助你設置你的腳在正確的道路上，享受用保險絲盒。

我們對社區的Gitter不斷增長，我們非常友好和支持！ 如果你喜歡的項目，不要忘了我們的明星GitHub的倉庫和關注我們的微博 。 否則，如果您有任何問題或意見，請不要猶豫，讓他們在下面的意見。

這篇文章是由同行評審多米尼克·邁爾斯 。 感謝所有SitePoint的審稿作出SitePoint內容也可以是最好的！

From: https://www.sitepoint.com//fusebox-faster-webpack-alternative/