序言

模組化，大家用vue，react等東西，都會接觸到像exports，module.exports，export，export default，require，define，import等等欄位，感覺很多人對於這些東西還是分不清，概念非常的模糊，便想著寫這麼一篇文章，一是幫助自己梳理知識點，二是跟大家一起成長。其中有寫得不對的，請及時提出來 ，我及時更正。

剛開始寫的時候有些無從下手，一是因為知識點太多，二是因為自己的經驗還不足以幫助大家從深層次剖析js的模組化中的區別，以及其實現原理、思想。這是一篇自己的學習筆記整理，我只能帶大家瞭解前端模組化，區分他們並正確的使用他們。

先給大家扔出幾條知識：

• CommonJS：NodeJS模組系統具體實現的基石。
• AMD：非同步模組規範，是RequireJS在推廣過程中對模組定義的規範化產出的，推崇依賴前置；
• UMD：相容AMD和commonJS規範的同時，還相容全域性引用的方式；
• CMD：是SeaJS 在推廣過程中對模組定義的規範化產出的，推崇依賴就近；
• ES6：ES6模組的設計思想是儘量的靜態化，使得編譯時就能確定模組的依賴關係，以及輸入和輸出的變數；

CommonJS規範

CommonJS官網上寫道，它希望js不僅僅可以在瀏覽器上執行，而是可以在任何地方執行,使其具備開發大型應用的能力。

javascript: not just for browsers any more!

CommonJS定義的模組分為:

1. 模組引用(require)
2. 模組定義(exports)
3. 模組標識(module)

他可以做到：

• 伺服器端JavaScript應用程式
• 命令列工具
• 圖形介面應用程式
• 混合應用程式（如，Titanium或Adobe AIR）

CommonJS模組的特點如下

• 所有程式碼都執行在模組作用域，不會汙染全域性作用域。
• 模組可以多次載入，但是隻會在第一次載入時執行一次，然後執行結果就被快取了，以後再載入，就直接讀取快取結果。要想讓模組再次執行，必須清除快取。
• 模組載入的順序，按照其在程式碼中出現的順序。

先談一談包的概念

前面給大家說過，node.js

包規範

關於包規範，類比於git倉庫，我們可以這麼理解:

• git init在當前資料夾中生成了隱藏檔案.git，我們把它叫做git倉庫。
• npm init命令在當前資料夾中生成了配置檔案package.json，它描述了當前這個包，我們管這個檔案叫做包（概念不準確，可以這麼理解）。

包結構

嚴格按照CommonJS規範來的話，包的目錄應當包含以下檔案或目錄。

• package.json：包描述檔案，存在於包頂級目錄下
• bin：存放可執行二進位制檔案的目錄
• lib：存放js程式碼的目錄
• doc：存放文件的目錄
• test：存放單元測試用例程式碼的目錄

而package.json則是一個配置檔案，它描述了包的相關資訊。

NodeJS模組

既然node.js是基於CommonJS實現的，那麼我們先來簡單看看NodeJS的模組原理。

最近參加了公司開展的一次培訓，結構性思維培養。任何東西都能夠進行分類，事物一旦進行分類，更利於大家對此事物的認知，也能方便大家記憶。所以我們先來看看Node的模組分類。

通常分類

先給大家講講模組的分類

• 核心模組

  • 核心模組指的是那些被編譯進Node的二進位制模組
  • 預置在Node中，提供Node的基本功能，如fs、http、https等。
  • 核心模組使用C/C++實現，外部使用JS封裝

• 第三方模組

  • Node使用NPM(Node Package Manager)安裝第三方模組
  • NPM會將模組安裝(可以說是下載到)到應用根目錄下的node_modules資料夾中
  • 模組載入時，node會先在核心模組資料夾中進行搜尋，然後再到node_modules資料夾中進行搜尋

• 檔案模組

  • 檔案可放在任何位置
  • 載入模組檔案時加上路徑即可

• 資料夾模組（後續的nodeJS的載入規則將會詳細介紹）

  • Node首先會在該資料夾中搜索package.json檔案，

    • 存在，Node便嘗試解析它，並載入main屬性指定的模組檔案
    • 不存在(或者package.json沒有定義main屬性)，Node預設載入該資料夾下的index.js檔案（main屬性其實NodeJS的一個拓展，CommonJS標準定義中其實並不包括此欄位）

估計大家對於資料夾模組概念都比較模糊，它其實相當於一個自定義模組，給大家舉一個栗子