@[toc] ## 寫在前面 關于JavaScript的模塊化的需求來源以及相關標準可以參考以下兩篇： [Javascript模塊化編程系列一: 模塊化的驅動](https://blog.csdn.net/oscar999/article/details/8902060) [Javascript模塊化編程系列二: 模塊化的標準化(CommonJS & AMD)](https://blog.csdn.net/oscar999/article/details/8905155) 此處，在代碼層演示不同標準的代碼 以及在Node.js演示的效果。 ## JavaScript模塊化的規范 * Node.js 遵循 CommonJS * RequireJS 遵循AMD * Seajs 遵循 CMD * ES6, ECMAScript 6 是JavaScript的下一代標準規范，對模塊化也有一套定義 在JavaScript中，一個模塊，基本上是一個獨立的文件， ## Node.js 的模塊化實現 Node.js遵循CommonJS規范定義模塊，定義的方式是： * 使用module.exports定義模塊 * 使用require 導入模塊 這里建立兩個文件， sub.js定義一個模塊；main.js導入并使用sub.js定義的模塊 sub.js ```javascript module.exports={ myVar:'Oscar', myFunc:function(){ return 'Oscar'} } ``` main.js ```javascript var sub = require('./sub'); var s = sub.myFunc(); console.log(s); ``` 以上的示例是調用在模塊中定義的某個函數， 在控制臺打印函數的返回值。 測試方式： 在命令行運行 ` node main.js`  ## AMD or CMD 代碼示例 相比CommonJS ， AMD/CMD 只是在最外層使用define 包裝了一層。 sub.js ```javascript define(function (require, exports, module) { module.exports = { myVar: 'Oscar', myFunc: function () { return 'Oscar' } } }); ``` main.js ```javascript define(function (require, exports, module) { var sub = require('./sub'); var s = sub.myFunc(); console.log(s); }); ``` ## ES6模塊化標準以及在Node.js的使用 ES6標準使用export 和 import 導出和導入模塊 ，早期的Node.js 沒有支持這個標準， 不過Node.js 9之后提供了一個實驗模塊， 可以直接使用 export/import ， 但是文件名后綴需要是 .mjs。 sub.mjs ``` var myVar = 'Oscar'; function myFunc() { return 'Oscar' } export {myVar,myFunc} ``` main.mjs ``` import {myVar,myFunc} from './sub.mjs' var s = myFunc(); console.log(s); ``` 注意： 運行的命令需要加--experimental-modules選項： `node --experimental-modules main.mjs`  這里會有一個警告：ExperimentalWarning: The ESM module loader is experimental. 意思就是這個模組還處在實驗階段，用用完可以，正式環境不建議使用。 在正式環境中，結合webpack可以正常使用export和import。 ***** *****