序言
模塊化，大家用vue，react等東西，都會接觸到像exports，module.exports，export，export default，require，define，import等等字段，感覺很多人對于這些東西還是分不清，概念非常的模糊，便想著寫這么一篇文章，一是幫助自己梳理知識點，二是跟大家一起成長。愛掏網 - it200.com其中有寫得不對的，請及時提出來 ，我及時更正。愛掏網 - it200.com
剛開始寫的時候有些無從下手，一是因為知識點太多，二是因為自己的經驗還不足以幫助大家從深層次剖析js的模塊化中的區別，以及其實現原理、思想。愛掏網 - it200.com這是一篇自己的學習筆記整理，我只能帶大家了解前端模塊化，區分他們并正確的使用他們。愛掏網 - it200.com
先給大家扔出幾條知識：
-
CommonJS：NodeJS模塊系統具體實現的基石。愛掏網 - it200.com -
AMD：異步模塊規范，是RequireJS在推廣過程中對模塊定義的規范化產出的，推崇依賴前置； -
UMD：兼容AMD和commonJS規范的同時，還兼容全局引用的方式； -
CMD：是SeaJS?在推廣過程中對模塊定義的規范化產出的，推崇依賴就近； -
ES6：ES6模塊的設計思想是盡量的靜態化，使得編譯時就能確定模塊的依賴關系，以及輸入和輸出的變量；
CommonJS規范
CommonJS官網上寫道，它希望js不僅僅可以在瀏覽器上運行，而是可以在任何地方運行,使其具備開發大型應用的能力。愛掏網 - it200.com
javascript: not just for browsers any more!
CommonJS定義的模塊分為:
- 模塊引用(
require) - 模塊定義(
exports) - 模塊標識(
module)
他可以做到：
- 服務器端JavaScript應用程序
- 命令行工具
- 圖形界面應用程序
- 混合應用程序（如，Titanium或Adobe AIR）
CommonJS模塊的特點如下
- 所有代碼都運行在模塊作用域，不會污染全局作用域。愛掏網 - it200.com
- 模塊可以多次加載，但是只會在第一次加載時運行一次，然后運行結果就被緩存了，以后再加載，就直接讀取緩存結果。愛掏網 - it200.com要想讓模塊再次運行，必須清除緩存。愛掏網 - it200.com
- 模塊加載的順序，按照其在代碼中出現的順序。愛掏網 - it200.com
先談一談包的概念
前面給大家說過，node.js是基于CommonJS的規范實現的，NPM大家一定都很熟悉，它實踐了CommonJS的包規范。愛掏網 - it200.com
包規范
關于包規范，類比于git倉庫，我們可以這么理解:
-
git init在當前文件夾中生成了隱藏文件.git，我們把它叫做git倉庫。愛掏網 - it200.com -
npm init命令在當前文件夾中生成了配置文件package.json，它描述了當前這個包，我們管這個文件叫做包（概念不準確，可以這么理解）。愛掏網 - it200.com
包結構
嚴格按照CommonJS規范來的話，包的目錄應當包含以下文件或目錄。愛掏網 - it200.com
-
package.json：包描述文件，存在于包頂級目錄下 -
bin：存放可執行二進制文件的目錄 -
lib：存放js代碼的目錄 -
doc：存放文檔的目錄 -
test：存放單元測試用例代碼的目錄
而package.json則是一個配置文件，它描述了包的相關信息。愛掏網 - it200.com
NodeJS模塊
既然node.js是基于CommonJS實現的，那么我們先來簡單看看NodeJS的模塊原理。愛掏網 - it200.com
最近參加了公司開展的一次培訓，結構性思維培養。愛掏網 - it200.com任何東西都能夠進行分類，事物一旦進行分類，更利于大家對此事物的認知，也能方便大家記憶。愛掏網 - it200.com所以我們先來看看Node的模塊分類。愛掏網 - it200.com
通常分類
先給大家講講模塊的分類
-
核心模塊
- 核心模塊指的是那些被編譯進Node的二進制模塊
- 預置在Node中，提供Node的基本功能，如fs、http、https等。愛掏網 - it200.com
- 核心模塊使用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標準定義中其實并不包括此字段）
-
估計大家對于文件夾模塊概念都比較模糊，它其實相當于一個自定義模塊，給大家舉一個栗子