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。