前端模塊規范AMD/UMD/CommonJs

.babelrc文件中的：module設置為false，為什么會要設置成false？

解釋：使ES6模塊語法轉換到另一個模塊類型(默認啟用“commonjs”)。 設置為假則不變換模塊。或者傳入(“amd”、“umd”,“systemjs”、“commonjs”)。

什么是模塊？

Javascript的組件生態在最近幾年的發展很給力，我們的可選性更加廣泛了。這本是一件好事，但是當多個第三方Javascript在一起混合使用的時候，我們可能會遇到一個很尷尬的問題，那就是不是所有的組件都能在一起很愉快的玩耍的。

為了解決這個問題，兩種競爭關系的前端模塊規范（AMD和CommonJS）問世了。他們規定開發者們采用一種約定好的模式來寫代碼，以避免污染整個生態系統。

AMD規范--通過define(['加載的模塊依賴'，'',''], 加載完依賴的回調函數)

AMD規范，全稱”Asynchronous Module Definition”，稱為異步模塊加載規范。一般應用在瀏覽器端。流行的瀏覽器端異步加載庫RequireJS（中文網站）實現的就是AMD規范。

下面是使用AMD規范定義一個名為foo模塊的方式，此模塊依賴jquery，

1 2 3 4 5 6 7 8

// filename: foo.js define(['jquery'], function ($) { // methods function myFunc(){}; // exposed public methods return myFunc; });

AMD講究的是前置執行。稍微復雜的例子如下，foo模塊有多個依賴及方法暴漏，

1 2 3 4 5 6 7 8 9 10 11 12 13

// filename: foo.js define(['jquery', 'underscore'], function ($, _) { // methods function a(){}; // private because it's not returned (see below) function b(){}; // public because it's returned function c(){}; // public because it's returned // exposed public methods return { b: b, c: c } });

define是AMD規范用來聲明模塊的接口，示例中的第一個參數是一個數組，表示當前模塊的依賴。第二個參數是一個回調函數，表示此模塊的執行體。只有當依賴數組中的所有依賴模塊都是可用的時，AMD模塊加載器（比如RequireJS）才會去執行回調函數並返回此模塊的暴露接口。

注意，回調函數中參數的順序與依賴數組中的依賴順序一致。（即：jquery->$，underscore->_）

當然，在這里我可以將回調函數的參數名稱改成任何我們想用的可用變量名，這並不會對模塊的聲明造成任何影響。

除此之外，你不能在模塊聲明的外部使用$或者_，因為他們只在模塊的回調函數體中才有定義。

關於AMD規定聲明模塊的更多內容，請參考這里。

CMD規范---通過require('加載依賴’)

CMD規范，全稱”Common Module Definition”，稱為通用模塊加載規范。一般也是用在瀏覽器端。瀏覽器端異步加載庫Sea.js實現的就是CMD規范。

下面是使用AMD規范定義一個名為foo模塊的方式，此模塊依賴jquery，

1 2 3 4 5 6 7 8 9 10

define(function (require, exports, module) { // load dependence var $ = require('jquery'); // methods function myFunc(){}; // exposed public methods return myFunc; })

CMD規范傾向依賴就近，稍微復雜一點例子

1 2 3 4 5 6 7 8 9 10 11 12

define(function (requie, exports, module) { // 依賴可以就近書寫 var a = require('./a'); a.test(); // ... // 軟依賴 if (status) { var b = requie('./b'); b.test(); } });

關於AMD和CMD的區別，可參考這篇文章，AMD/CMD與前端規范。

CommonJS規范---require('加載模塊')--module.exports = 暴露的公共方法名稱

根據CommonJS規范，一個單獨的文件就是一個模塊。每一個模塊都是一個單獨的作用域，也就是說，在一個文件定義的變量（還包括函數和類），都是私有的，對其他文件是不可見的。

如果你在Node.js平台上寫過東西，你應該會比較熟悉CommonJS規范。與前面的AMD及CMD規范不一樣的是，CommonJS規范一般應用於服務端（Node.js平台），而且CommonJS加載模塊采用的是同步方式（這跟他適用的場景有關系）。同時，得力於Browserify這樣的第三方工具，我們可以在瀏覽器端使用采用CommonJS規范的js文件。

下面是使用CommonJS規范聲明一個名為foo模塊的方式，同時依賴jquery模塊，

1 2 3 4 5 6 7 8 9

// filename: foo.js // dependencies var $ = require('jquery'); // methods function myFunc(){}; // exposed public method (single) module.exports = myFunc;

稍微復雜一點的示例如下，擁有多個依賴以及拋出多個接口，

1 2 3 4 5 6 7 8 9 10 11 12 13 14

// filename: foo.js var $ = require('jquery'); var _ = require('underscore'); // methods function a(){}; // private because it's omitted from module.exports (see below) function b(){}; // public because it's defined in module.exports function c(){}; // public because it's defined in module.exports // exposed public methods module.exports = { b: b, c: c };

UMD規范--支持AMD和CommonJS規范

因為AMD，CommonJS規范是兩種不一致的規范，雖然他們應用的場景也不太一致，但是人們仍然是期望有一種統一的規范來支持這兩種規范。於是，UMD（Universal Module Definition，稱之為通用模塊規范）規范誕生了。

客觀來說，這個UMD規范看起來的確沒有AMD和CommonJS規范簡約。但是它支持AMD和CommonJS規范，同時還支持古老的全局模塊模式。

我們來看個示例，

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD define(['jquery'], factory); } else if (typeof exports === 'object') { // Node, CommonJS-like module.exports = factory(require('jquery')); } else { // Browser globals (root is window) root.returnExports = factory(root.jQuery); } }(this, function ($) { // methods function myFunc(){}; // exposed public method return myFunc; }));

個人覺得UMD規范更像一個語法糖。應用UMD規范的js文件其實就是一個立即執行函數。函數有兩個參數，第一個參數是當前運行時環境，第二個參數是模塊的定義體。在執行UMD規范時，會優先判斷是當前環境是否支持AMD環境，然后再檢驗是否支持CommonJS環境，否則認為當前環境為瀏覽器環境（window）。當然具體的判斷順序其實是可以調換的。

下面是一個更加復雜的示例，

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

(function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD define(['jquery', 'underscore'], factory); } else if (typeof exports === 'object') { // Node, CommonJS-like module.exports = factory(require('jquery'), require('underscore')); } else { // Browser globals (root is window) root.returnExports = factory(root.jQuery, root._); } }(this, function ($, _) { // methods function a(){}; // private because it's not returned (see below) function b(){}; // public because it's returned function c(){}; // public because it's returned // exposed public methods return { b: b, c: c } }));

Tips: 如果你寫了一個小工具庫，你想讓它及支持AMD規范，又想讓他支持CommonJS規范，那么采用UMD規范對你的代碼進行包裝吧，就像這樣。

 

轉載自：http://blog.gejiawen.com/2015/11/03/what-is-amd-cmd-commonjs-umd/

感謝