介绍
在前端开发中，我们经常需要对代码进行打包，压缩等操作，以满足项目的需求。而 fuse-box 就是一个尤其适合用于 webpack 之外的打包工具。
fuse-box 的特点是快，非常快。它使用先进的缓存和并行加载技术，可以在短短几秒钟内重新构建和重载代码。
在这篇教程中，我们将学习如何使用 fuse-box 打包我们的 JavaScript 应用程序。
安装
首先，我们需要在全局环境中安装 fuse-box：
npm install -g fuse-box
然后，我们可以在我们的项目根目录下安装 fuse-box 的本地依赖：
npm install --save-dev fuse-box
创建一个简单的示例
在我们开始使用 fuse-box 之前，我们需要创建一个简单的示例，以测试它是否正常工作。
1.创建一个 index.js 文件
在项目根目录下创建一个 index.js 文件，并添加以下代码：
console.log("Hello, world!");
2. 构建你的代码
使用 fuse-box 编译我们的代码，只需简单地执行以下命令：
fuse index.js
这将创建一个 name_bundle.js 文件，其中 name 是我们的项目名称。执行上述命令后，你应该可以看到以下输出：
20:55:35.938 [LOG] FuseBox 3 Fused successfully in 10 ms!
我们的代码已经被成功打包！
3.在 HTML 页面中使用打包后的代码
为了测试我们的应用程序，我们需要在 HTML 页面中包含刚刚生成的 name_bundle.js 文件。
<html> <body> <script src="name_bundle.js"></script> </body> </html>
现在我们可以在浏览器中打开包含我们的 HTML 页面的文件并查看浏览器的 console。你应该看到以下输出：
Hello, world!
恭喜！你成功地创建了一个简单的应用程序，并使用 fuse-box 打包了它。现在，我们可以移动到更高级的应用程序中。
了解基本配置
在构建一个稍微复杂一点的应用程序时，我们需要了解一些基本的配置选项。
在我们的项目根目录中创建一个 fuse.js 文件。
-- -------------------- ---- ------- ----- - ------- - - -------------------- ----- ---- - -------------- -------- ------ --- ----- --- - --------------------------------------------- ----------- -----------展开代码
在上面的示例中：
homeDir是存储源文件的文件夹名，而instructions属性则指定了从哪个文件开始打包我们的应用程序。在上面的示例中，我们从index.js文件开始。fuse.dev();告诉 fuse-box 在开发模式下运行，在这种情况下，fuse-box 会在文件发生更改时自动重新构建您的应用程序。fuse.run();用于构建我们的应用程序。当它运行时，你将看到类似以下的输出：
[15:30:56] dev-watcher:start watchting [15:30:56] dev-watcher:ready First Build: index.js -> dist/app.js [15:30:56] dev-watcher:ready FuseBox 4 Fused successfully in 25 ms!
FuseBox 4信息将因您正在使用的版本而有所不同。
现在我们已经构建了我们的应用程序。
加载 CSS
有时，我们需要在我们的应用程序中加载 CSS 文件。我们可以使用 fuse-box-css 模块来处理。
我们可以使用以下内容安装该模块：
npm install fuse-box-css --save-dev
我们还需要在我们的 fuse.js 文件中包括以下内容：
-- -------------------- ---- ------- ----- - ---------- ------- - - -------------------- ----- ---- - -------------- -------- ------ -------- - ----------- - --- ----- --- - --------------------------------------------- ----------- -----------展开代码
这种指令还允许您将样式表内联到 JavaScript 文件中，以便您可以更轻松地处理它。
加载图像和字体
FuseBox 还可以帮助您轻松轻松地加载图像和字体。
要加载字体：
//Declare FontPath in your fuse.js file const fontPath = './fonts/**.{eot,svg,ttf,woff,woff2}'; //Instruct the bundle to load fonts using the following instructions const app = fuse.bundle("app").instructions(` > index.js + [${fontPath}] `);
要加载图像：
//Declare the assets path to load all images const assetsPath = './assets/**'; //Instruct the bundle to load assets using the following instructions const app = fuse.bundle("app").instructions(` > index.js + [${assetsPath}] `);
结论
通过学习本教程，你应该已经熟悉了 fuse-box 的基本使用。fuse-box 能够帮助我们快速地打包我们的 JavaScript 应用程序。
除此之外，我们还可以使用一些插件来完善我们的应用程序，包括加载 CSS，图像以及字体等。
谢谢你阅读这篇教程。希望你学到了新的东西并尝试使用 fuse-box 构建你的下一个应用程序！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65749
