參考： 前端模塊化

ES6 在語言標準的層面上，實現了模塊功能，而且實現得相當簡單，旨在成為瀏覽器和服務器通用的模塊解決方案。 其模塊功能主要由兩個命令構成：export和import。export命令用于規定模塊的對外接口， import命令用于輸入其他模塊提供的功能。

使用import命令的時候，用戶需要知道所要加載的變量名或函數名

/** 定義模塊 math.js **/ var basicNum = 0; var add = function (a, b) {return a + b; };// export命令用于規定模塊的對外接口 export { basicNum, add };/** 引用模塊 **/// import命令用于輸入其他模塊提供的功能 import { basicNum, add } from './math'; function test(ele) {ele.textContent = add(99 + basicNum); }復制代碼

其實ES6還提供了export default命令，為模塊指定默認輸出，對應的import語句不需要使用大括號。這也更趨近于ADM的引用寫法。

/** export default **/ //定義輸出 export default { basicNum, add }; //引入 import math from './math'; function test(ele) {ele.textContent = math.add(99 + math.basicNum); }復制代碼

ES6的模塊不是對象，import命令會被 JavaScript 引擎靜態分析，在編譯時就引入模塊代碼，而不是在代碼運行時加載，所以無法實現條件加載。也正因為這個，使得靜態分析成為可能。

ES6 模塊與commonJS模塊的差異

1. commonJS 模塊輸出的是一個值的拷貝，ES6模塊輸出的是值的引用

• commonJS模塊一旦輸出一個值，模塊內部的變化就影響不到這個值。
• ES6模塊如果使用import從一個模塊加載變量，那些變量不會被緩存，而是成為一個指向被加載模塊的引用，原始值變了，import加載的值也會跟著變。需要開發者自己保證，真正取值的時候能夠取到值。

2. commonJS 模塊是運行時加載，ES6 模塊是編輯時輸出接口

• 運行時加載：commonJS 模塊就是對象；即在輸入時是先加載整個模塊，生成一個對象，然后再從這個對象上讀取方法，這種加載稱為“運行時加載”。commonJS腳本代碼在require的時候，就會全部執行。一旦出現某個模板被“循環加載”，就只能輸出已經執行的部分，還未執行的部分不會輸出。

• 編譯時加載：ES6 模塊不是對象，而是通過export命令顯式指定輸出的代碼，import時指定加載某個輸出值，而不是加載整個模塊，這種加載稱為“編譯時加載”。

總結

以上是生活随笔為你收集整理的ES6模块与commonJS模块的差异的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。