Webpack&AMD&CMD

AMD

補充AMD與CMD規范的來源：

• AMD是RequireJS（國外作者）在推廣過程中形成的。
• CMD是SeaJs（國內作者：玉伯）在推廣過程中形成的。

time：2017/02/07

學習使用require.js

下載，RequireJS中文網，阮一峰——RequireJS和AMD規范

下面的例子均以main.js為RequireJS的入口文件。

定義匿名模塊（不存在依賴）

//count.js
define(function() {

    //_表示私有變量，外部無法直接訪問與更改。
    var _count = 0;
    function addCount(num) {
        return count += num;
    }
    
    //return后面跟的是該模塊暴露在外的接口
    return {
        addCount: addCount
    }
});

//在其他js腳本中的調用方式(main.js,與count.js在同一目錄下)
require(['count'], function(count) {
    console.log(count.addCount(1)); //控制台輸出1
});

（存在依賴且不在同一目錄下，例如jQuery）

//jquery在lib目錄下
//main.js
require.config({
    //baseUrl: 'lib',    可以通過修改baseUrl屬性來修改基目錄。默認地址是入口文件所在的位置。
    paths: {
        'jquery': 'lib/jquery'  //不需要帶.js后綴
    }
});

require(['count', 'jquery'], function(count, $) {
    var num = count.addCount();
    $('body').text(num);
});

模塊暴露的接口可以是函數

//test2.js
define([
    'require', 'jquery', 'count'
], function(require, $) {
    'use strict';
    var count = require('./count');
    return function exec(){
        var num = count.addNum(2);
        $('body').text(num);
    }
});

//main.js
require(['test2'], function (test2){
    test2();
});

兼容CommonJS寫法

//將require、exports、module作為依賴注入
define(function(require, exports, module) {
    var a = require('a'),
        b = require('b');
        
    module.expots = {};
});

為模塊定一個模塊ID

//顯示指定模塊名稱，不推薦。
define('module_id', [], function() {
    //code
});

//or 使用優化工具自動生成模塊名，來將多個模塊打成一個包。（加快瀏覽器的載入速度）

其他注意事項：

• 一個文件一個模塊：每個Js文件應該只定義一個模塊。
• define()中的相對模塊名：為了可以在define()內部使用諸如require("./relative/name")的調用以正確解析相對名稱，記得將require本身作為一個依賴注入到模塊中。

r.js options

配置目錄：build

1. appDir: app的最頂層路徑；非必要屬性；設置之后其他配置路徑都成為該路徑的相對路徑。
2. baseUrl：所有模塊的相對路徑。
3. mainConfigFile：requirejs的主要的配置文件，形如：requirejs({})與require.config({})。
4. path：為模塊配置路徑。
5. map
6. packages
7. dir：保存輸出文件的路徑，默認名為build(文件夾)，且與build file同目錄。
8. keepBuildDir
9. shim：兼容非AMD規范的組件

關於在gulp中使用requirejs，gulp-requirejs插件已被列入gulp的黑名單，表示和gulp不兼容。所以嘗試使用amd-optimize。