使用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中文網其他相關文章！