DR：在本文中，您将了解FuseBox，这是一个JavaScript和TypeScript模块绑定器，配置简单，但功能强大。事实上，FuseBox是如此强大和成熟，企业管理的软件，它可以成为WebPack的一个有效替代品。在本文中，您将配置一个简单的React应用程序，从而可以探索FuseBox的主要选项。如果需要，您可以找到在这个GitHub存储库上构建的最终项目。"看看FuseBox吧，这是一款年轻（但成熟）的JavaScript捆绑程序，它可以用更简单的方法取代WebPack。"在推特上留言为什么是保险丝盒？如果您以前有开发现代JavaScript应用程序（即使用最新ECMAScript特性（如类和模块）的应用程序）的经验，那么您一定要基于节点.js以及一个建筑系统（很可能是基于Webpack）。实际上，Webpack是当今配置现代JavaScript应用程序构建系统的一个事实上的标准，但新手往往认为它很难使用，尤其是在处理复杂应用程序时。一些工具可以帮助开发人员创建一个Webpack绑定配置，但这是其复杂性的明显征兆。如果你是那些认为网页包太复杂的人之一，那么，你可以考虑一下保险丝盒。FuseBox是一个年轻（但成熟）的项目，有几个明确的原则：速度：构建应用程序必须尽可能快。简单：配置一个构建系统不应该引起麻烦。可扩展性：任何FuseBox内核不能处理的事情都必须通过插件来完成。FuseBox坚持这些原则，淘客返利，采用了一些方法，如默认使用TypeScript编译器、利用强大的缓存系统、允许零配置代码拆分、提供简单易懂的配置语法、支持集成的任务运行器、提供能够覆盖所有内容的丰富插件集大多数应用程序需要，以及许多其他东西。保险丝盒工作中现在您对FuseBox及其原理有了一点了解，现在可以开始在实践中学习它了。为此，云服务器哪里好，您将首先设置一个基本的React项目，然后使用FuseBox配置和构建应用程序。建立一个基本的React项目考虑一个基本的基于React的项目，比如可以使用createreact app创建一个项目，但是没有用于构建它的Webpack。您可以从GitHub存储库的初始react project分支下载此基本项目：#克隆回购git克隆https://github.com/andychiare/fusebox-react-tutorial.git#移到项目目录cd保险丝盒反应教程#签出所需的分支git checkout初始反应项目克隆此回购并签出所述分支后，您将得到一个包含以下结构的项目：这些文件实现了经典的React应用程序，如以下屏幕截图所示：当然，由于缺少建筑系统，该项目还没有准备好运行。所以，确保你节点.js安装并创建v8包.json描述项目及其与此内容的依赖关系的文件（在项目根目录中）：// ./包.json{"name"："保险丝盒反应示例"，"version"："1.0.0"，"description"："这是一个简单的项目，演示如何使用FuseBox为React应用程序设置构建系统"，"主"：索引.js","license"："ISC"，"依赖关系"：{"react"："^16.5.2"，"react dom"："^16.5.2"},"开发依赖性"：{"保险丝盒"："^3.5.0"，"typescript"："^3.0.3"，淘客平台，"丑陋es"："^3.3.9"}}除了名称、描述和其他信息性数据外包.json文件将react和react dom声明为项目中使用react所需的依赖项。devDependencies部分包含对构建项目所需的包的引用。你会发现对保险丝盒、TypeScript和Uglify的引用。也许你在想为什么你需要打字和丑陋。FuseBox将TypeScript视为其第一类语言。也就是说，您可以用TypeScript编写应用程序。当然，由于JavaScript是TypeScript的一个子集，所以任何JavaScript应用程序都可以由TypeScript transpiler编译（因此，如果不使用TypeScript特性，就不用担心了）。最后，丑是用来丑化产生的JavaScript代码的（也就是说，让它更难阅读）。现在，您可以通过在项目的根目录中键入以下命令来安装指定的依赖项：npm安装几分钟后，您将发现node_modules目录中填充了所需的包。配置保险丝盒现在是时候配置保险丝盒了，以便构建React项目。为此，首先创建一个名为保险丝.js包含以下内容的项目根目录：// ./保险丝.jsconst{FuseBox，WebIndexPlugin，SVGPlugin，CSSPlugin}=require（"保险丝盒"）；常数保险丝=保险丝盒.init({homeDir:"/src"，输出："./dist/$名称.js",useTypescriptCompiler:真，插件：[CSSPlugin（），SVGPlugin（），WebIndexPlugin({模板："src/索引.html"})]});保险丝.bundle（"应用程序"）.说明（">索引.js");保险丝。运行();如您所见保险丝.js文件是常规的JavaScript代码。第一行从保险丝盒模块导入一些项目。特别是，FuseBox对象用于通过init（）方法创建引擎的实例。作为参数传递给init（）的对象定义了保险丝盒引擎的设置。homeDir属性指定包含项目的文件夹的相对路径。output属性定义将在其中创建生成过程结果的文件夹和生成的包的名称。您可以注意到在定义输出捆绑包的字符串中的占位符$name。这是一个宏变量，它引用稍后指定的捆绑包名称。useTypescriptCompiler属性告诉FuseBox使用TypeScript transpiler生成ECMAScript5代码。目前，强制使用TypeScript编译器需要此选项（有关详细信息，请参阅本讨论）。plugins属性包含向保险丝盒引擎添加功能的插件列表。特别是，它指定了CSSPlugin（）插件（用于处理和加载CSS代码）、SVGPlugin（）插件（允许将SVG文件导入JavaScript代码）和WebIndexPlugin（）插件（将指定的HTML文件配置为模板）。稍后您将看到如何定义HTML模板。FuseBox实例fuse的bundle（）方法定义要分配给结果bundle的名称，而instructions（）方法定义构建过程的起点，即构建过程应该从中开始的JavaScript文件。稍后，您将了解有关可以传递给此方法的字符串值的更多信息。最后一句话，保险丝。运行（），启动实际的生成过程。定义HTML文件在启动构建过程之前，您需要绑定主HTML文件（例如。，索引.html)到生成的一个或多个绑定。您使用WebIndexPlugin（）指定主HTML文件的路径和名称。实际上，如果您不指定任何文件，FuseBox将为您生成一个新的HTML。但是，如果您想对这个文件的内容有更多的控制，那么定义您自己的HTML文件是很方便的。例如，对于要构建的React应用程序，您需要定义一个根元素来附加应用程序。事实上索引.html文件包含以下标记：在您需要启用JavaScript才能运行此应用程序。在在如您所见，它是一个简单的几乎是空的HTML页面。但是，您希望FuseBox插入对它在构建过程中生成的bundle的引用。因此，请将此文件的内容替换为：在您需要启用JavaScript才能运行此应用程序。$捆绑包在在注意添加到标记中的两个宏变量：$css和$bundles。第一个将替换为对从CSS代码生成的bundle的引用（如果有的话），而第二个将替换为对将从JavaScript/TypeScript代码生成的bundle的引用。除了$css和$bundles之外，FuseBox还提供了一组宏，允许将数据注入到HTML模板中。例如，您可以使用$author将应用程序的author name放入标记中，$title作为要用作HTML页面标题的值，或者使用$keywords来提供元标记的列表。这些宏中的每个宏都对应于传递给WebIndexPlugin（）插件的配置对象的属性，如下所示：WebIndexPlugin({模板："src/索引.html",作者："Auth0公司"，title:"一个简单的React应用程序"，关键词："反应，保险丝盒，建筑系统，捆绑"})使用保险丝盒构建项目现在，您已经准备好启动FuseBox，以便构建React应用程序。因此，在项目根目录中键入以下命令：节点保险丝几秒钟后，构建过程将在dist文件夹中生成以下文件，您将获得索引.html文件和应用程序js编译React应用程序文件时产生的绑定。请注意，当前保险丝盒配置生成的捆绑包是一个开发捆绑包，大数据算法，其中包含未优化的ES5代码。另外，在deve