使用Fusebox和React

如果您正在寻找WebPack的替代捆绑包，则可能需要查看Fusebox。它建立在WebPack提供的基础上 - 代码拆分，热模块重新加载，动态导入等 - 但是在保险箱中的代码拆分需要默认情况下的零配置（尽管WebPack将提供与版本4.0相同的配置）。

取而代之的是，为简单起见（以较不复杂的配置）和性能（通过包括积极的缓存方法）构建了保险箱。另外，它可以扩展到使用大量插件，这些插件可以在默认设置之外处理所需的任何内容。

哦，是的，如果您是打字稿的粉丝，您可能有兴趣知道Fusebox使其成为一流的公民。这意味着您可以在打字稿中编写一个应用程序 - 没有配置！ - 默认情况下，它将使用Typescript Transpiler来编译脚本。不打算使用打字稿吗？不用担心，转板器将处理任何JavaScript。又一个奖励！

为了说明启动和运行的速度，让我们构建通常用Create-React-React-App脚手架的样本应用程序的骨头。如果您想跟随，我们所做的一切都将在Github上。

当然，Fusebox并不是WebPack的唯一替代方法。有很多东西，实际上，马克斯·阿肯科科（Maks Akymenko）在包裹上有很棒的文章，这是另一个值得研究的替代方法。

基本设置

首先创建一个新的项目目录并使用NPM初始化它：

 ##创建目录
mkdir csstricks-fusebox-react && $ _
##使用NPM默认选项初始化
npm init -y

现在我们可以安装一些依赖项。我们将在React中构建该应用程序，因此我们需要以及React-Dom。

 npm安装 - 保存react react-dom

接下来，我们将安装Fusebox和Typescript作为依赖项。我们也将uglify扔到那里，以帮助缩小脚本，并为SASS中的写作风格增加支持。

 NPM安装-Save-dev fuse-box typeScript uglify-js节点sass

好吧，现在让我们在项目目录的根部创建一个SRC文件夹（可以手动完成）。在其中添加以下文件（`app.js and Index.js），包括内容：

 // app.js

导入 *作为“反应”的反应；
从“ ./logo.svg”中导入 *为徽标;

const app =（）=> {
  返回 （
    <div classname="“" app>
      <header classname="“" app-header>
        <img src="%7Blogo%7D" classname="“" app-logo alt="“" logo>
        <h1 id="欢迎来到react">欢迎来到react </h1>
      </header>
      <p classname="“" app-intro>
        要开始，请编辑`src/app.js`并保存到重新加载。
      </p>
    </div>
  ）
};

导出默认应用；

您可能已经注意到我们正在导入SVG文件。您可以直接从GitHub存储库下载它。

 // index.js

导入 *作为“反应”的反应；
从“反应 -  dom”中导入 *作为反应；
从“ ./app”导入应用程序

Reactdom.render（
  <app></app>，document.getElementById（'root'）
）；

您可以看到，我们处理导入文件的方式与典型的React应用程序有些不同。那是因为Fusebox默认情况下不会导入多文件。

因此，而不是这样做：

从“反应”中导入反应；

…我们正在这样做：

导入 *作为“反应”的反应；

 



  
    <title> csstricks fusebox react </title>
    $ CSS
  

  
    <noscript>
      您需要启用JavaScript来运行此应用。
    </noscript>
    <div> </div>
    $捆
  

以上是使用Fusebox和React的详细内容。更多信息请关注PHP中文网其他相关文章！