保险箱简介

>保险箱：webpack的快速而简单的替代品

> webpack统治着最高的JavaScript模块Bundler，但其复杂性通常会阻止新移民。 本文冠军保险箱（Fusebox）是一种更快，更直观的替代方案，旨在简化您的前端开发工作流程。

>现代前端开发在很大程度上依赖于代码组织，可维护性和可重复使用的JavaScript模块系统。 但是，ES模块的浏览器兼容性仍然不完整，因此需要一个捆绑器将模块合并到浏览器就绪的文件中。 Fusebox擅长此角色，提供下一代生态系统，包括捆绑，模块加载，转卸，任务运行等等。

>

该教程通过Essential Fusebox任务为您指导您：

• 捆绑：定义入口点和捆绑名称。
>
• >转倾性：利用打字稿和定位ES5。
• >模块加载：将模块组合到一个文件中。
• 资产处理：使用插件（例如，用于SASS汇编）。
• 热模块重新加载（HMR）：实时项目更新。
>
• >任务运行： sparky介绍，Fusebox的集成任务跑者。
• >单元测试：利用Fusebox的内置测试跑者。
• 生产优化：创建用于部署的缩小，优化的捆绑包。>
>完成后，您将有能力将Fusebox集成到您的项目中，从而从其速度，简单性和适应性中受益。

> Fusebox的关键优点：

>增强的速度和简单性：

保险箱在速度和易于配置方面显着优于webpack。

• 多一部分工具集：
它充当模块Bundler，Loader，Transpiler和Task Runner，涵盖了整个开发生命周期。>本机打字稿和ES6支持：在Typescript或ES6中写代码；保险箱毫不费力地处理转升。
• >简化的开发： hmr和内置服务器增强了开发体验。
• Sparky Task Runner：一个强大的，可扩展的任务跑步者，用于自动化常见的开发任务。 为开发和生产进行了优化的
： 一个基本的捆绑示例：
• > （注意：作者是Fusebox的核心贡献者。）>

  大型项目要求有效捆绑，以避免许多阻止HTTP请求。保险箱简化了此过程。 需要最小的配置；十条线通常就足够了。

  1. 创建一个项目目录并初始化它：npm init -y
  2. >安装Fusebox：npm install fuse-box -D。
  3. 创建src目录和其中一个文件：index.js>

  console.log('Hello world');

  Fusebox配置：
  4. 创建一个fuse.jsfile（项目root）：>

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

  此配置指定源目录（

  ），输出目录（homeDir），捆绑名称（“ app”）和入口点（output）。 运行index.js创建捆绑的node fuse.js文件。dist/app.js>

  thrasspiling thexpript和es6：> >现代项目经常使用ES6或打字稿。 Fusebox本质上支持打字稿并自动处理ES6转卸。

  创建一个新的项目并安装依赖项：。

  >
  1. 在npm install fuse-box typescript -D>目录中：
  >
  2. index.ts src
  update
  指向

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

  ：
  3. fuse.js index.ts instructions("> index.ts");>运行
  现在捆绑并转移打字稿代码。

  （原始响应的其余部分详细详细介绍了模块加载，插件，HMR，Sparky，单元测试，开发与生产和FAQ部分，以及FAQ部分将由于长度约束而被省略。核心概念和基本示例已经提供了完整的细节。 Fusebox提供了一个引人注目的替代品，可以优先考虑速度和简单性，而无需牺牲功能。 它的全面功能集与易用性相结合，使其成为下一个JavaScript项目的强大竞争者。

以上是保险箱简介的详细内容。更多信息请关注PHP中文网其他相关文章！