一：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)) // 3other.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模块化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。