搜尋

首頁 >web前端 >js教程 >理解JavaScript模塊：捆綁和移動

理解JavaScript模塊：捆綁和移動

Christopher Nolan
Christopher Nolan原創
2025-02-18 08:35:10964瀏覽

Understanding JavaScript Modules: Bundling & Transpiling <script> </script> $（function（）{...}）;

>您自己的應用程序代碼通常在像全球應用程序之下命名，以防止污染全局範圍。沒有這個 

<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>
未來

以通用模塊格式（ES6模塊）導出對象。

我們將模塊導入本地範圍並使用它。 
<span>export default function $() { ... }
</span>
> 

<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>
無需全球嗎？
    >
  • >源順序獨立
  • >訪問NPM
  • 無需命名您自己的應用程序代碼
  • >隨時按需要動態加載模塊
    • 現在的

>真的很複雜。 首先，使用的是多種模塊格式：

commonjs

> amd
  • umd
  • > ES6模塊
    • 捆綁資產的工具有多種形狀和尺寸：>
    • browserify

jspm

    > webpack
    • 匯總
    • 早午餐 / brocolli
    • 鏈輪
    • >用gulp / grunt
  • 建立自己的構建
  • 然後有您可能要使用的轉介劑：
    • >
  • ES6
    • 的 babel
> coffeescript

打字稿
    • 此外，還有各種庫可以允許模塊的動態加載：>
    • require.js
    • > system.js

>這些是當前正在使用的流行工具的縮短列表 - 這是針對初學者和專家的雷區。 移動的成本還突出了您可以混合和匹配許多此類工具並獲得不同結果的成本。
    >
  • 讓我們在2016年合併工具
  • 前端開發人員已經使用了構建工具很長時間了，但是直到最近幾年，我們才看到構建步驟成為常態。 Sass和Coffeescript等工具有助於預處理主流，但是ES6周圍的動力現在使每個人都加入了。 JavaScript社區在2015年取得了重大改進，但我們需要在2016年合併工具。
    • 我同意。
在過去的幾年中，

Gulp和Grunt一直很受歡迎，這些工具使您能夠編寫一系列轉換以使您的資產通過。 儘管很多人選擇直接通過NPM使用這些工具，但它們已經習慣了，但仍然很受歡迎 - 請參閱為什麼我將gulp and Grunt用於NPM腳本，並指南將NPM用作構建工具。

>

>就我個人而言，我不再關心建造資產管道，我要尋找的是最小的配置工具，它允許我根據需要使用現代工具：諸如Sass，Autoprefixer，Babel和Coffeescript之類的東西，適當的模塊系統和加載程序不必擔心實施，配置和持續的維護。 從本質上講，每個開發人員在過去幾年中一直在投入時間來創建資產管道，這是大量的重新發明，並且有很多浪費的時間。

>

>社區分為諸如瀏覽，WebPack，JSPM，鏈輪和Gulp之類的工具。 這不是一個真正的問題，這只是讓每個試圖了解一條明確前進道路的人都感到困惑。

清除起點

我們可以同意以下幾件事：

>

ES2015模塊是JavaScript的一種真實的未來模塊格式。 >
    babel是當今首選的ES2015編譯器。
  • >
    • >本機加載機距離瀏覽器中的可用性還有一段時間，Telerik對JavaScript的未來報告表明，鑑於模塊加載hurdle，完整的ES2015支持可能需要兩年多的時間。
  • >
    • 如果您現在想使用模塊，那很可能在某個時候涉及commonj。
    • >讓我們看一下最小配置設置的外觀，使用browserify，webpack和jspm，這些是當今最重要的JavaScript捆綁包。
  • 一個新項目
    • 您喜歡的文本編輯器中的更新index.html

>我們還需要一台服務器來運行代碼 - 例如，Live-Server是具有實時重新加載功能的很棒的Little Zero-Config HTTP服務器。使用NPM install -G實時服務器全球安裝它，然後從項目root到“啟動”實時服務器。

browserify 
<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>

瀏覽器讓您在瀏覽器中需要（'模塊'），通過捆綁所有依賴項。

> 
<span>export default function $() { ... }
</span>
打開src/lib.js並添加我們的第一個模塊。

>

>打開src/entry.js，我們將需要我們的模塊並使用它。 >

>更新package.json

中的腳本部分

>使用NPM運行瀏覽
<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>
運行此腳本 瀏覽將在項目root中創建bundle.js，您應該在控制台上看到最大的4輸出。 要了解有關瀏覽器正在做什麼以及如何創建該捆綁的更多信息，我建議您觀看egghead.io

> browserify的介紹

恭喜！我們現在在瀏覽器中有模塊！ ？ 
<span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span>

>瀏覽的另一個關鍵好處是，它不僅可以使您訪問您的作者模塊，還可以訪問NPM模塊，讓我們安裝Lodash以查看。 > 

<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span><span><span><span><head</span>></span>
</span>  <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>  <span><span><span><title</span>></span>Modules!<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>  <span><span><span><script</span> src<span>="bundle.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
>編輯src/lib.js

>編輯src/entry.js並調用我們的新Addfive 

<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>

>使用NPM運行瀏覽器再次創建捆綁包，在瀏覽器中，您應該看到一個4和一個7，這表明我們已經成功導入並使用了lodash的總和函數。

如果您遵循這一範圍，您現在知道您今天開始使用瀏覽器中使用模塊所需的一切，這帶來了我們一開始就概述的許多好處。

>

    無需全球嗎？
  • >
    • >源順序獨立
    • >訪問NPM
    • 無需命名自己的應用程序代碼
>我們將在運行時查看模塊的動態加載。

>

> webpack

>讓我們添加一個新腳本。

>使用NPM運行webpack

運行它 嘗試運行NPM運行瀏覽和NPM運行webpack，並檢查編譯捆綁包中的差異。 了解這些工具在內部的工作原理並不重要，要注意的重要的是，儘管實現不同，但它們基本上正在執行相同的任務，將相同的代碼與CommonJS模塊編譯為標準瀏覽器友好的JavaScript。 每個模塊都放入bundle.js中的功能中，並分配了一個ID，以便可以根據需要加載它。 

<span>export default function $() { ... }
</span>

> WebPack比這要多得多！ 它確實是模塊捆綁機的瑞士軍刀。 WebPack還提供了開箱即用的出色工具，例如熱模塊替換，它將在更改時自動重新加載瀏覽器中的單個模塊 - 類似於LiverEload，但沒有頁面刷新。

>也有越來越多的不同資產類型的裝載機列表，即使是帶有CSS-Loader和样式加載程序的CSS，也可以將CSS編譯到JavaScript捆綁包中並在運行時注入頁面。 這超出了本文的範圍，但可以從WebPack開始時可以找到更多。

>。

> JavaScript transpilers

這是當今使用的三個最受歡迎的轉側，您也可能想使用另一種，從

的語言中使用另一種。 在查看如何將它們與模塊捆綁器一起使用之前，讓我們看看如何直接使用工具。 > coffeescript

>編輯咖啡lib.coffee

注意：CoffeeScript使用模塊的commonjs語法

>添加一個腳本。

>使用NPM運行咖啡

運行它

打字稿
<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>

編輯ts-lib.ts

注意：TypeScript具有自己的模塊的語法，看起來像ES2015模塊語法和COMPORJS的混合。 
<span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span>

>將腳本添加到package.json以運行TSC可執行

<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>

>使用NPM運行TSC

運行它

>編譯器將抱怨無法找到Lodash，因為它需要類型定義才能知道如何使用不是打字稿文件的外部模塊。 您可以使用以下方式獲取定義文件：

<span>export default function $() { ... }
</span>

babel

編輯ES6-lib.js 

<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>

注意：Babel了解可愛的新ES2015模塊語法。

babel需要一個配置文件，以指定要使用

>的預設 

<span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span>
>添加一個腳本。

>使用npm運行babel 
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span><span><span><span><head</span>></span>
</span>  <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>  <span><span><span><title</span>></span>Modules!<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>  <span><span><span><script</span> src<span>="bundle.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>
運行它

> /dist中的文件現在包含COMPONJS模塊格式的ES5代碼，該格式將與我們之前使用的那樣，將與瀏覽或WebPack完美配合。 您可以先用concomjs將ES5轉移到ES5，然後再捆綁，也可以使用其他軟件包在一個步驟中進行。

>

>瀏覽中有插件咖啡，tssify和babelify to thranspile and Bundle。

>

> WebPack有裝載機咖啡加載程序，TS-Loader和Babel-Loader需要不同語言的模塊。

jspm

JSPM是SystemJS Universal Module Loader的軟件包管理器，該軟件模塊加載器構建在動態ES6模塊加載器

上的頂部 JSPM採用不同的方法，並從模塊加載程序系統開始。 System.js是一個項目，將遵循加載器規格開發的項目。 >

>安裝並初始化JSPM項目

接受所有默認值並確保將Babel用作轉板器，該默認值將配置System.js在運行到ES6樣式模塊時使用Babel。

>“更新索引”

>在瀏覽器中，您會看到一些請求和lodash的404，這是因為JSPM默認情況下從JSPM_Packages目錄加載軟件包。 
<span>var double = function(number) {
</span>  <span>return number * 2;
</span><span>}
</span>
module<span>.exports = {
</span>  <span>double: double
</span><span>}
</span>
>運行JSPM安裝lodash以在該目錄中安裝lodash，您應該在控制台，A 4和7中看到預期的輸出，這是發生的事情：

>

我們的entry.js文件正在動態加載system.import（'src/entry.js'）;。 

<span>var lib = require('./lib.js');
</span><span>console.log(lib.double(2));
</span>
> system.js加載條目。

system.js加載lib.js，發現它需要lodash/sum並獲取它。

>

> system.js還知道如何直接與ES6合作，更新輸入。
  • >您也可以嘗試通過一次刪除這些行，一次刪除我們的CoffeeScript或打字條模塊的ES5編譯版本。另一個選項是使用system.js插件來傳輸代碼，而不是需要預編譯ES5代碼。
  • >將最終腳本添加到包裝。
  • >使用NPM運行JSPM
    • 運行它

    >最終取消註釋index.html中的bundle.js的腳本標籤，瀏覽器應加載一個可以生產的捆綁包，而無需任何額外的http請求。 

<span>var App = {};
</span><span>App.<span>Models</span> = {};
</span><span>App.<span>Models</span>.<span>Note</span> = function() {};
</span>
重新訪問webpack

>我們的WebPack示例是使用默認選項的最簡單示例，它將帶有commonjs模塊的entry.js彙編為一個捆綁包。 使用webpack做更多的花哨事件時，您需要為所有加載程序配置創建一個自定義配置文件。

>創建wearpack.config.js在項目的根部

> 

<span>export default function $() { ... }
</span>
>“更新index.html”僅加載捆綁的文件。 >

>安裝加載程序，用於使用Babel，CoffeeScript和Typescript 
<span>import $ from 'jquery';
</span>
<span>$(function() { ... });
</span>
進行轉換

>全球安裝WebPack，並且沒有參數以從我們的配置文件創建捆綁包。 
<span>mkdir modules-app
</span><span>cd modules-app
</span><span>npm init -y
</span><span>npm install --save-dev browserify webpack jspm
</span><span>mkdir src
</span><span>touch src/{entry,lib}.js index.html
</span>
。

>現在WebPack知道將這些加載程序用於這些文件擴展名，我們可以隨意使用Entry.js中的ES6，CoffeeScript或Typescript。 
<span><span><!DOCTYPE html></span>
</span><span><span><span><html</span> lang<span>="en"</span>></span>
</span><span><span><span><head</span>></span>
</span>  <span><span><span><meta</span> charset<span>="utf-8"</span>></span>
</span>  <span><span><span><title</span>></span>Modules!<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>  <span><span><span><script</span> src<span>="bundle.js"</span>></span><span><span></script</span>></span>
</span><span><span><span></body</span>></span>
</span><span><span><span></html</span>></span>
</span>

> WebPack比我在這裡介紹的要多得多，但是這些簡單的設置是一個很棒的起點。

>再次返回
<span>var double = function(number) {
</span>  <span>return number * 2;
</span><span>}
</span>
module<span>.exports = {
</span>  <span>double: double
</span><span>}
</span>
>

>因此，我們結束了對模塊的探索，它們確實解決了很多問題，並且可以真正降低應用程序的複雜性 - 如果工具不會阻礙我們的方式。 如果您還沒有使用模塊，那麼現在是時候了。無需花費不必要的時間來構建資產管道，而是使用只有工作™的簡單工具。 webpack是當前的Juggernaut，您將能夠將其配置為幾乎所有操作。 JSPM是滿足您所有捆綁需求的絕佳工具，並且可以使用各種格式，並且具有良好的開發人員體驗。瀏覽仍然是一個可靠的選擇，是現代模塊捆綁器的祖父 - 它的生態系統已經發展起來，包括Webpack的一些備受喜愛的功能（例如捆綁拆分和熱重新裝載）。 最後，system.js非常適合當您需要在運行時加載額外的模塊時。

>

>您不想在一個項目中使用上述所有工具，但重要的是要了解這三個流行的選項，以及在需要時如何使用換手器。 如果您只想使用模塊，則使用默認選項瀏覽，JSPM或WebPack將完成工作。

>保持工具簡單和配置燈。快樂捆綁。

經常詢問有關JavaScript模塊，捆綁和transphitling

的問題（常見問題解答）

> JavaScript模塊，捆綁和翻轉的區別是什麼？

JavaScript模塊是可以在其他腳本中導入和使用的各個代碼單位。它們有助於組織代碼，使其更可維護和重複使用。另一方面，捆綁是將多個JavaScript文件組合到單個文件中的過程。這樣做是為了減少HTTP請求的數量，這可以顯著提高Web應用程序的性能。轉移是將源代碼從一種語言或版本轉換為另一種語言的過程。在JavaScript的背景下，它通常是指將較新的JavaScript語法轉換為較舊的版本，以與較舊的瀏覽器兼容。 為什麼在JavaScript中捆綁很重要？ 。首先，它通過將多個JavaScript文件組合為一個來減少HTTP請求的數量。這可以顯著提高Web應用程序的性能。其次，捆綁使您可以在不支持它們的瀏覽器中使用模塊。最後，捆綁還可以包括一個稱為Minification的過程，該過程減少了JavaScript文件的大小，進一步提高了性能。

>

> JavaScript Transpiler的作用是什麼？ Babel，在確保在不同瀏覽器中兼容JavaScript代碼方面起著至關重要的作用。它通過將較新的JavaScript語法轉換為大多數瀏覽器支持的舊版本來實現此目的。這允許開發人員使用JavaScript的最新功能而不必擔心瀏覽器兼容性問題。

> javaScript模塊如何工作？

> javaScript模塊是一個獨立的代碼，它導出了特定變量或特定變量的代碼其他模塊可以使用的功能。導入模塊時，其導出變量或功能將用於導入腳本。這允許代碼重複使用和更好的代碼組織。

>一些流行的JavaScript捆綁工具是哪些？

>一些流行的JavaScript捆綁工具包括WebPack，lollup和Parcel。這些工具不僅包裝JavaScript文件，還提供諸如代碼分配，懶惰加載以及處理其他資產（例如CSS和Images）等功能。

>

如何在編寫現代JavaScript？允許開發人員使用最新功能和語法編寫現代JavaScript，而不必擔心兼容性問題。轉板器將現代JavaScript轉換為與大多數瀏覽器兼容的版本。這樣可以確保JavaScript代碼始終在不同的瀏覽器上運行。

>

>我可以使用JavaScript模塊而不捆綁嗎？但是，由於多個HTTP請求，這可能會導致性能問題。另外，並非所有瀏覽器都支持JavaScript模塊，因此捆綁可以幫助確保兼容性。

>

>捆綁和縮合之間有什麼區別？

我如何為項目選擇正確的捆綁工具？

選擇捆綁工具的選擇取決於項目的要求。要考慮的因素包括項目的規模，所需的功能（例如代碼分配或處理其他資產）以及您的個人喜好。嘗試一些不同的工具是一個好主意，看看哪種工具最適合您的項目。

> JavaScript模塊，捆綁和移動的未來是什麼？模塊，捆綁和移動看起來很有希望。隨著JavaScript的持續演變，我們可以期望更多的高級功能和語法，這將需要轉移以與較舊的瀏覽器兼容。出於績效原因，捆綁將繼續很重要。至於模塊，它們正在成為JavaScript的標準部分，我們可以期望在瀏覽器中為它們提供更好的支持。

以上是理解JavaScript模塊：捆綁和移動的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript typescript json css gulp html es6 npm sass coffeescript webpack Static if for while format include require try Directory continue using Namespace finally JS console number function default this idea http https everything Access Other
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：帶有MORI的不變數據和功能性JavaScript下一篇：帶有MORI的不變數據和功能性JavaScript

相關文章

看更多