Requirejs与r.js打包，AMD|CMD|UMD|CommonJS|ES6模块化

####一：require.js
1、require.js是什么？为什么要用它？
require.js是一个JavaScript模块载入框架，实现的是AMD规范。使用require.js有以下优点：
① 异步加载，防止js加载阻塞页面渲染，提高了性能。
② 使用程序调用的方式加载js，避免使用传统的标签引入方式。
③ 模块化，便于代码的编写和维护。
④ 按需加载，减少不必要的载入。
2、require.js与传统方式对比
①：传统方式
dom结构：
这里写图片描述
a.js源码：

运行效果：

总结：这样虽然结构与逻辑分离，a.js这种写法虽然实现了模块化，不会污染全局环境，但是看起来并没有那么优雅，而且可以看到文本test并没有渲染出来，也就是在head中引入js，js的加载会阻塞下边dom的渲染，这是一个同步的过程。
② require.js方式
dom结构：
这里写图片描述
a.js源码：

运行效果：

总结：可以看到require.js方式head中js的加载并没有阻塞下边dom的渲染，也就是说这是一个异步的过程，通过define定义模块，require加载模块更清晰明了。
3、require.js常用api
（1）define 定义模块
（2）reuqire 加载依赖模块，执行加载完后的回调函数
（3）config 配置信息，常用配置项：
① paths 指定资源别名、设置资源路径
② baseUrl 设置获取资源时的公共前置路径，简化paths中路径的写法
③ waitSeconds 设置加载模块时的最长等待时间
④ shim 设置文件的依赖、输出非AMD模块化文件
4、使用require.js改造昨天的sass demo
（1）目录结构：
这里写图片描述
(2) 运行效果：

（3）源码链接：https://github.com/XieTongXue/demo/tree/master/requirejs-demo
####二、r.js
概念：r.js是requireJs的优化工具，能合并压缩js、css。
使用r.js打包以上开发的demo，r.js在github下载
文件目录如下：
这里写图片描述
新增build.js，源码如下：

其中name配置项为打包入口，out为输出，baseUrl为paths前置路径。
新建collect.js，用于收集模块

进入build 文件夹，命令行运行 node r.js -o build.js，会生成一个app.js，在index.html中引用即可。
这里写图片描述
源码链接：https://github.com/XieTongXue/demo/tree/master/r.js-demo
####三、AMD|CMD|UMD|CommonJS|ES6
AMD：异步模块定义，异步加载模块，即不堵塞浏览器其他任务，而加载内部是同步的（加载完模块后立即执行回调）。
CMD：与AMD不同的是，AMD一开始要将依赖以数组形式导入，而CMD推崇依赖就近，延迟执行。
UMD：AMD和CommonJS（服务端模块化规范)的结合体，UMD先判断是否支持Node.js的模块（exports）是否存在，存在则使用Node.js模块模式，再判断是否支持AMD（define是否存在），存在则使用AMD方式加载模块。
CommonJS：服务端模块化规范，如Nodejs

写法举例：

AMD：(代表：require.js)

// math.js
define(function () {
    var add = function (x, y) {
        return x + y
    }
    return {
        add: add
    }
})

// use.js
require(['math', 'other'], function (math, other) {
    console.log(math.add(1, 2)) // 3
    other.doSomething()  // other
})

CMD：(代表：sea.js)

// CMD
define(function(require, exports, module) {
    var a = require('./a');
    a.doSomething();
    var b = require('./b');
    b.doSomething();
})
// 对应 AMD
define(['a', 'b'], function(a, b) {
    a.doSomething()
    b.doSomething()
    // 模块自己的方法
})

UMD：

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define(['b'], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory(require('b'));
    } else {
        // Browser globals (root is window)
        root.returnExports = factory(root.b);
    }
}(this, function (b) {
    //use b in some fashion.

    // Just return a value to define the module export.
    // This example returns an object, but the module
    // can return a function as the exported value.
    return {};
}));

CommonJS:

// math.js
exports.add = function (a, b) {
    return a + b
}

// use.js
var math = require('math')
math.add(1, 2)

ES6：

// math.js
export function add (a, b) {
    return a, b
}

// use.js
import {add} from 'math'
add(1, 2)

Requirejs与r.js打包，AMD|CMD|UMD|CommonJS|ES6模块化

猜你喜欢