一：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）源码链接：/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中引用即可。
源码链接：/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.jsdefine(function () {var add = function (x, y) {return x + y}return {add: add}})// use.jsrequire(['math', 'other'], function (math, other) {console.log(math.add(1, 2)) // 3other.doSomething() // other})
CMD：(代表：sea.js)
// CMDdefine(function(require, exports, module) {var a = require('./a');a.doSomething();var b = require('./b');b.doSomething();})// 对应 AMDdefine(['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.jsexports.add = function (a, b) {return a + b}// use.jsvar math = require('math')math.add(1, 2)
ES6：
// math.jsexport function add (a, b) {return a, b}// use.jsimport {add} from 'math'add(1, 2)
如果觉得《Requirejs与r.js打包 AMD CMD UMD CommonJS ES6模块化》对你有帮助，请点赞、收藏，并留下你的观点哦！
