FuseBox简介-更快，更简单的Webpack替代方案

最新推荐文章于 2024-03-31 08:00:00 发布

dingshi7798

最新推荐文章于 2024-03-31 08:00:00 发布

阅读量1k

点赞数

文章标签： webpack 测试前端 ViewUI

webpack可以说已经成为事实上的JavaScript模块捆绑器，但是它以混乱和难以学习而闻名。 在本文中，我想提出一个更快，更简单的Webpack替代品— FuseBox 。

在当今快速发展的前端环境中，牢牢掌握JavaScript模块系统至关重要。模块可以帮助组织代码，使其更易于维护并提高其可重用性。不幸的是，浏览器还没有对ES模块的支持，因此您总是需要一个模块捆绑器将它们捆绑在一起，形成一个文件，然后再交付给浏览器。

FuseBox是下一代工具生态系统，可满足开发生命周期的所有要求。它使开发人员可以捆绑任何文件格式，包括模块加载器，编译器，任务运行器等等。

在本文中，我们将使用FuseBox引导您完成开发JavaScript应用程序所涉及的常见任务。这些如下：

捆绑：定义入口点和捆绑名称
转译：使用TypeScript和目标ES5编写
模块加载：将模块合并为一个文件
处理其他资产：使用FuseBox插件编译Sass
热模块重载（HMR）：看到您的项目自动更新以反映您的更改
任务运行：FuseBox的内置任务运行器 Sparky的简介
单元测试：FuseBox内置测试运行器简介
定位生产：生产一个缩小的，丑陋的捆绑包以进行部署。

阅读完后，您可以将FuseBox放入下一个项目，并从其速度，简便性和灵活性中受益。

捆绑-一个基本的例子

免责声明：我是该项目的核心贡献者之一。

项目正在变得越来越大-这是事实。如果我们要一页一页地包含所有需要的文件，这将使事情变得相当慢，因为浏览器必须发出一堆阻止HTTP请求的内容。捆绑解决了此问题，并减少了请求的文件数量，FuseBox使得此过程尽可能简单。

要开始捆绑，我们需要教FuseBox我们想要的东西。 FuseBox不需要太多的配置即可捆绑大型项目。实际上，对于大多数用例而言，十行配置通常就足够了。但是，在开始介绍一些实际示例之前，让我们创建一些简单的东西。

首先，创建一个新文件夹。然后，从您的命令行导航到它并输入以下内容： npm init -y 。这将初始化您的项目。然后键入npm install fuse-box -D ，它将安装FuseBox作为开发依赖项。

接下来，创建一个名为src的文件夹，这是所有代码的存放位置。另外，在src文件夹中创建一个index.js文件，并将以下内容添加到其中：

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。然后，我们使用init方法初始化FuseBox的新实例。这在FuseBox术语中也称为Producer 。在这里，我们为所有捆绑包定义全局配置。

homeDir选项将homeDir指向文件的主目录。这是因为FuseBox创建的虚拟文件结构模仿物理文件结构。 output选项告诉FuseBox我们的输出包应位于何处。注意$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 － 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 。

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

请注意，情况仍然与以前相同，唯一的区别是我们在instructions('>index.ts')使用.ts文件格式而不是.js 。现在已经具备了先决条件，从命令行输入node fuse.js ，FuseBox将开始捆绑。

完整的示例可在此处获得。

注意：使用ES6语法时，FuseBox将自动检测模块类型并无缝地转换代码。 无需Babel。 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 node fuse.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 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 ： 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将在dist文件夹中生成index.html 。打开此文件，您将看到CSS应用于该页面。

现在，在main.css ，尝试更改行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() 。这就是使用FuseBox启用HMR所需要的。从命令行输入node fuse.js ，您将在控制台中看到以下消息： server running http://localhost:4444 。

这是FuseBox的URL，它将使您能够访问您的项目。转到http：// localhost：4444 /并开始更改一些CSS或JavaScript文件。您会看到更改立即在浏览器中反映出来，而无需一次刷新！

完整的示例可在此处获得。

认识Sparky，内置任务运行器

到目前为止，我们一直在处理捆绑文件，但是大多数项目通常需要执行一些额外的任务，例如清理文件夹，复制文件，增加应用程序版本等。

还记得我们说过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时它将自动执行。注意， default任务定义中有["clean", "watch:images"] 。这是Sparky执行流程的一个示例。 Sparky有两种模式： waterfall模式和parallel模式。在waterfall模式下，任务将按顺序执行，这意味着在完成clean任务之前，不会执行上述watch:images任务。

还要注意，我们将fuse.run移到了default任务。这很重要，因为我们要确保捆绑将在其他任务完成后开始。

第二个clean任务非常简单：我们使用clean方法删除dist文件夹。

第三个watch:images任务负责复制图像。 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开始任何断言，该方法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应该为您创建开发包还是生产包。

然后，在传递给FuseBox.init()的对象上有一个hash属性，该属性设置为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在加载时自动执行文件。