RequireJS 入門到跑路

Requirejs和自動打包視頻教程

爲什麼使用 requirejs

隨着網站逐漸變成"互聯網應用程序（WebApp）"，嵌入網頁的 JavaScript 代碼也變得越來越複雜和臃腫，原有通過 script 標籤來導入一個個的 js 文件這種方式已經不能滿足現在互聯網開發模式，我們需要團隊協作、模塊複用、單元測試等等一系列複雜的需求。
但是，在 ES6 之前，JavaScript 不支持模塊化開發。爲此 JavaScript 社區做了很多努力，在現有的運行環境中，實現“模塊”的效果。
RequireJS 是一個非常小巧的 JavaScript 模塊載入框架，是 **AMD** 規範最好的實現者之一。最新版本的 RequireJS 壓縮後只有18K，堪稱非常輕量。它還同時可以和其他的框架協同工作，使用 RequireJS 必將使您的前端代碼質量得以提升。

兼容性

IE 6+ ..... 兼容 ✔
Firefox 2+ ..... 兼容 ✔
Safari 3.2+ .... 兼容 ✔
Chrome 3+ ......兼容 ✔
Opera 10+ ......兼容 ✔

主要功能

異步加載文件
一個文件一個模塊
減少全局變量
jsonp 支持

模塊化寫法變遷

原始寫法

模塊就是實現特定功能的一組方法。只要把不同的函數（以及記錄狀態的變量）簡單地放在一起，就算是一個模塊。比如 tool.js ：

var count = 10;
function showA() {}
function showB() {}

上面的函數 showA 和 showB，組成了一個模塊。使用的時候，直接調用就行了。
這種做法的缺點很明顯：“污染”了全局變量，無法保證不與其他模塊發生變量名衝突，而且模塊成員之間看不出直接關係。

對象寫法

爲了解決原始寫法的缺點，可以把模塊寫成一個對象，所有的模塊成員都放到一個對象裏面。

var moduleA = {
    count: 10,
    showA: function() {},
    showB: function() {}
}

最大問題，count 變量會暴露在外，有被篡改的風險。

立即執行函數（閉包）

使用立即執行函數（IIFE）,可以達到不暴露私有成員的目的。

(function() {
  var count = 10;
  function showA() {}
  function showB() {}
  return {
    outA: showA,
    outB: showB
  }
})()

可以解決全局變量污染問題和私有化變量和方法。最大的問題：不利於二次開發。

放大模式

//moduleA.js
var moduleA = (function() {
  var count = 10;
  function showA() {}
  function showB() {}
  return {
    outA: showA,
    outB: showB
  }
})();

//moduleA.Plus.js
moduleA = (function(mod) {
  mod.showC = function() {};
  return mod;
})(moduleA)

最大的缺點就是，加載必須有先後順序。

寬放大模式

//moduleA.js
var moduleA = (function(mod) {
  var count = 10;
  function showA() {}
  function showB() {}
  mod.outA = showA;
  mod.showB = showB;
  return mod;
})(moduleA || {});

//moduleA.Plus.js
var moduleA = (function(mod) {
  mod.showC = function() {};
  return mod;
})(moduleA || {})

模塊化規範

CommonJS

適用於服務器端規範，js 文件是本地下載，代碼同步執行。

module.exports = {
  outA: showA,
  outB: showB
}

var moduleA = require('moduleA');
moduleA.outA();
moduleA.outB();

AMD

客戶端/瀏覽器。所有的 js 文件都得先下載，代碼採用異步執行的方式。

define(function() {
    return {
        outA: showA,
        outB: showB
    }
})

require(['moduleA'], function(moduleA) {
  //模塊引入之後執行
})

alert('同步執行');

requirejs 與常規寫法對比

正常編寫方式

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="js/a.js"></script>
    </head>
    <body>
      <span>body</span>
    </body>
</html>

function fun1(){
  alert("it works");
}

fun1();

可能你更喜歡這樣寫

(function(){
    function fun1(){
      alert("it works");
    }
    fun1();
})()

第二種方法使用了塊作用域來申明 function 防止污染全局變量，本質還是一樣的，當運行上面兩種例子時不知道你是否注意到，alert 執行的時候，html 內容是一片空白的，即<span>body</span>並未被顯示，當點擊確定後，纔出現，這就是JS阻塞瀏覽器渲染導致的結果。

requirejs寫法

下載 requireJS

規範建議

模塊化開發的作用域：管理當前頁面上引入的所有 .js 文件。
入口文件 main.js ：管理當前 html 頁面使用所有的 js 代碼。每一個 html 文件都要一個入口文件。
也即是說整個 html 文件只能有這麼一個 scritp 標籤。所有的 js 文件都在 main.js 文件中管理（在 main.js 內部，可以使用 require函數來加載需要運行的任何其他腳本）。每個入口文件給一個 html 文件使用。

<!-- data-main attribute tells require.js to load scripts/main.js after require.js loads. -->
<!-- 指定的 data-main 腳本是異步加載的 -->
<script src="require.js" data-main="main" async="true" defer></script>

使用 requirejs 改寫常規寫法

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="require.js"></script>
        <script type="text/javascript">
            require(["js/a"]);
        </script>
    </head>
    <body>
      <span>body</span>
    </body>
</html>

define(function(){
    function fun1(){
      alert("it works");
    }
    fun1();
})

瀏覽器提示了 "it works"，說明運行正確，但是有一點不一樣，這次瀏覽器並不是一片空白，body 已經出現在頁面中。目前爲止可以知道 requirejs 具有如下優點：

防止 js 加載阻塞頁面渲染
使用程序調用的方式加載 js，防出現如下醜陋的場景

<script type="text/javascript" src="js/a.js"></script>
<script type="text/javascript" src="js/b.js"></script>
<script type="text/javascript" src="js/c.js"></script>
<script type="text/javascript" src="js/d.js"></script>
<script type="text/javascript" src="js/e.js"></script>
<script type="text/javascript" src="js/f.js"></script>
<script type="text/javascript" src="js/g.js"></script>
<script type="text/javascript" src="js/h.js"></script>
<script type="text/javascript" src="js/i.js"></script>
<script type="text/javascript" src="js/j.js"></script>

基本API

require 會定義三個變量：

define()
require()
requirejs()

其中 require === requirejs，一般使用 require 更簡短。

define

定義一個模塊。

define('模塊名', ['依賴模塊名', ...], function(依賴模塊返回的對象,...) {
   // 模塊的實現 function
	 // return 返回結果 可以是任何數據類型或者不返回都可以
})

define('helper', ['jquery'], function($) {
  return {
    trim: function(str) {
      return $.trim(str);
    }
  }
})

define 函數包含三個參數，模塊名、模塊依賴、模塊的實現 function：

模塊名可以不寫，默認以文件路徑（相對於 baseUrl）作爲模塊名。
依賴的模塊是個數組，如果沒有也可以不寫。
依賴的模塊執行下載完成之後，會把模塊參數傳到模塊實現的 function 形參裏面，參數的順序對應着模塊依賴的順序。

define({
    username: 'silva',
  	age: 18
})

最佳實踐：不建議自定義模塊名，比如下面的寫法就會出現問題：

能引入 helper.js 文件，但並能獲取到模塊的導出，打印 helper 爲 undefined。
- 需要在 helper.js 中命名模塊名爲 add/helper 或者直接刪除模塊名。

解決上面這個問題後，刷新後還是報上述錯誤，發現能正常引入 jquery.js 了，但打印 $ 爲 undefined。
- 同樣是模塊名的問題，因爲 jquery.js 文件中定義了模塊名叫 jquery，而當 requireJS 根據模塊名 ../lib/jquery 去查找模塊時是找不到的，結果爲 undefined 。
- 不建議直接修改 jquery 源碼中的模塊名，可通過在 app.js 中配置 require.config 的 paths: {jquery: "lib/jquery"}參數。這樣一來模塊名和模塊地址就都對應的上了。

正確寫法：

require

加載依賴模塊，並執行加載完後的回調函數。

require(['模塊名'], function(模塊導出的對象) {
  // 加載完後的 function
  var str = helper.trim('  amd  ');
  console.log(str);
})

require(['helper'], function(helper) {
  var str = helper.trim('  amd  ');
  console.log(str);
})

require 的依賴是一個數組，即使只有一個依賴，你也必須使用數組來定義，否則會報 Uncaught Error: Invalid require call 錯誤。
require API 的第二個參數是 callback，一個 function，是用來處理加載完畢後的邏輯。

加載機制

requireJS 使用 **head.appendChild()** 將每一個依賴加載爲一個 script 標籤（可從 js 文件響應頭信息 Content-Type: application/javascript 看出）。所以可以跨域訪問，比如從 CDN 上加載一個 JS 文件。
模塊加載後會立即執行。

JSONP

同源策略：www.baidu.com 通過 ajax 不能獲取 www.qq.com 的數據。
jsonp 是 json 的一種使用模式，可以跨域獲取數據，如 json。原理通過 script 標籤的跨域請求來獲取跨域的數據。

//requirejs 是通過script標籤來加載模塊
require(['http://xxx.test/user.js'], function (user) {
    console.log(user);
});

//user.js 返回內容
define({
  id: '',
  username: ''
})

全局配置

上面的例子中重複出現了require.config配置，如果每個頁面中都加入配置，必然顯得十分不雅，requirejs 提供了一種叫"主數據"的功能，我們首先創建一個 main.js：

require.config({
  	urlArgs: "_=" + (new Date()).getTime(),
  	waitSeconds: 7,
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"],
        "a" : "js/a"   
    }
})

然後再頁面中使用下面的方式來使用 requirejs：

<script data-main="js/main" src="js/require.js"></script>

解釋一下，加載 requirejs 腳本的 script 標籤加入了**data-main** 屬性，這個屬性指定的 js 將在加載完 require.js 後處理（異步加載，不會阻塞後面的 js）。這樣當我們把require.config的配置加入到data-main指定的 js 文件後，就可以使後面每一個頁面都使用這個配置，然後頁面中就可以直接使用 require 來加載所有的短模塊名。

data-main還有一個重要的功能，當 script 標籤指定 data-main 屬性時，require 會默認的將 data-main 指定的 js 爲根路徑，是什麼意思呢？

如上面的 data-main="js/main"設定後，我們在使用 require(['jquery'])後（不配置 jquery 的 paths），require 會自動加載 js/jquery.js 這個文件，而不是 jquery.js，相當於默認配置了：require.config({ baseUrl : "js"})。

baseUrl

requirejs 以一個相對於 baseUrl 的地址來加載所有的代碼。

首先如果通過 require.config() 顯式配置了 baseUrl，那麼優先級最高。
再者如果沒有顯示配置 baseUrl，而使用了 data-main 屬性，那麼 baseUrl 爲 data-main 屬性 JS 腳本所在的目錄。
最後如果兩個都沒有，那麼 baseUrl 等於包含運行 RequireJS 的 HTML 頁面的目錄。

paths

映射不放於 baseUrl 下的模塊名。比如 jquery 的模塊名不是相對於 baseUrl 下的模塊，這個時候就可以配置 paths 參數，讓模塊名和路徑能匹配上。

paths 參數可以設置一組腳本的位置，值可以是一個字符串或數組。
一般都是通過 baseUrl + path 的方式來引入腳本。
requirejs 加載的腳本不能有 .js 後綴申明（因爲 requirejs 默認會加上 .js 後綴）。
有時候確實希望直接引用腳本，而不遵循 baseUrl + paths 規則來查找它。如果模塊 ID 具有以下特徵之一，那麼該 ID 將不會通過 baseUrl + paths 配置傳遞，而只是作爲相對於文檔的常規 URL 處理：
- 以 ".js" 結尾.
- 以 "/" 開頭.
- 包含 URL protocol，如 "http:" 或 "https:".

require.config({
  baseUrl: '/js',
  paths: {
    jquery: 'lib/jquery', //格式爲 模塊名: 模塊路徑
  }
})

之前的例子中加載模塊都是本地 js，但是大部分情況下網頁需要加載的 JS 可能來自本地服務器、其他網站或 CDN，這樣就不能通過這種方式來加載了，以加載一個 jquery 庫爲例：

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]   
    }
})

require(["jquery", "js/a"],function($){
    $(function(){
        alert("load finished");  
    })
})

這邊涉及了**require.config**，paths 是用來配置模塊加載位置，簡單點說就是給模塊起一個更短更好記的名字，比如將百度的 jquery 庫地址標記爲 jquery，這樣在 require 時只需要寫["jquery"]就可以加載該 js，本地的 js 我們也可以這樣配置：

require.config({
    paths : {
        "jquery" : "http://libs.baidu.com/jquery/2.0.3/jquery",
        "a" : "js/a"
    }
})

require(["jquery", "a"],function($){
    $(function(){
        alert("load finished");  
    })
})

通過 **paths** 的配置會使我們的模塊名字更精煉，paths 還有一個重要的功能，就是可以配置多個路徑，如果遠程 cdn 庫沒有加載成功，可以加載本地的庫，如：

require.config({
    paths : {
        "jquery" : [
          "http://libs.baidu.com/jquery/2.0.3/jquery", 
          "js/jquery"
        ],
        "a" : "js/a"   
    }
})

require(["jquery", "a"],function($){
    $(function(){
        alert("load finished");  
    })
})

這樣配置後，當百度的 jquery 沒有加載成功後，會加載本地 js目錄下的 jquery

在使用 requirejs 時，加載模塊時不用寫**.js**後綴的，當然也是不能寫 js 後綴
上面例子中的 callback 函數中發現有$參數，這個就是依賴的jquery模塊的輸出變量，如果你依賴多個模塊，可以依次寫入多個參數來使用：

require(["jquery","underscore"],function($, _){
    $(function(){
        _.each([1,2,3],alert);
    })
})

如果某個模塊不輸出變量值，則沒有，所以儘量將輸出的模塊寫在前面，防止位置錯亂引發誤解。

shim

第三方模塊，配置不支持 AMD 的庫和插件，比如 Modernizr.js 、bootstrap。

require.config({
    shim: {
        "modernizr" : {// 配置不支持 AMD 的模塊
            deps: ['jquery'], // 依賴的模塊，此處假設依賴 jquery
            exports : "Modernizr",// 把全局變量Modernizr作爲模塊對象導出
          	init: function($) { // 初始化函數，返回的對象替換 exports，作爲模塊對象
               return $; 
            }
        }
    }
})

通過require加載的模塊一般都需要符合 AMD 規範，即使用 define 來申明模塊，但是部分時候需要加載非AMD規範的 js，這時候就需要用到另一個功能：shim，shim解釋起來也比較難理解，shim直接翻譯爲"墊"，其實也是有這層意思的，目前我主要用在兩個地方：

非AMD模塊輸出，將非標準的 AMD 模塊"墊"成可用的模塊，例如：在老版本的 jquery 中，是沒有繼承 AMD 規範的，所以不能直接 require["jquery"], 這時候就需要 shim，比如我要是用 underscore 類庫，但是他並沒有實現 AMD 規範，那我們可以這樣配置

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        }
    }
})

這樣配置後，我們就可以在其他模塊中引用 underscore 模塊：

require(["underscore"], function(_){
    _.each([1,2,3], alert);
})

插件形式的非AMD模塊，我們經常會用到 jquery 插件，而且這些插件基本都不符合 AMD 規範，比如 jquery.form 插件，這時候就需要將 form 插件"墊"到 jquery 中：

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : {
            deps : ["jquery"]
        }
    }
})

//也可以簡寫爲：
require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : ["jquery"] //只有deps配置時可簡化爲一個數組
    }
})

這樣配置之後我們就可以使用加載插件後的 jquery 了

require.config(["jquery", "jquery.form"], function($){
    $(function(){
        $("#form").ajaxSubmit({...});
    })
})

map

版本映射。和 paths 配置有點類似，可簡單看做是針對某個模塊的 paths 配置。
項目開發初期使用 jquery1.12.3，後期以爲需要支持移動開發，升級到 jquery2.2.3。但是又擔心之前依賴 jquery1.12.3 的代碼升級到 2.2.3 後可能會有問題，就保守的讓這部分代碼繼續使用 1.12.3 版本。

requirejs.config({
    map: {
      	'*': {
          	'jquery': './lib/jquery'
        },
        'app/api': {
            'jquery': './lib/jquery'
        },
        'app/api2': {
            'jquery': './lib/jquery2'
        }
    }
});

* 表示所有模塊中使用，將加載 jquery.js。
當 app/api 模塊里加載 jquery 模塊時，將加載 jquery.js。
當 app/api2 模塊里加載 jquery 模塊時，將加載 jquery2.js。

特別注意：此功能僅適用於調用 define() 並註冊爲匿名模塊的真正 AMD 模塊的腳本。以上面的 jquery 舉例（非匿名模塊），map 中聲明的 jquery 和在 paths 中聲明的會有所不同，具體變現爲在 map 中聲明的 jquery 在使用 require(['jquery']) 或 define(['jquery']) 聲明依賴時，腳本可以正常引入但不會被注入對應處理函數的形參中。

// app/util1.js
define(function () {
    return {
        name: 'util1'
    };
});

// app/util2.js
define(function () {
    return {
        name: 'util2'
    };
});

// app/admin.js
define(['util'], function (util) {
    console.log(util); // 結果爲 {name: 'util2'}
    return {
        name: 'admin'
    }
});

// app/main.js
require.config({
    map: {
        '*': {
            util: 'app/util',
        },
        'app/admin': {
            util: 'app/util2'
        }
    }
});

// index.html
require(['app/admin'], function (admin) {
  console.log(admin);
});

waitSeconds

下載 js 等待的時間，默認7 秒。如果設置爲 0 ，則禁用超時等待。

urlArgs

下載文件時，在 url 後面增加額外的 query 參數。

require.config({
  urlArgs："_= " +（new Date()).getTime()
})

插件

text 插件

用於加載文本文件的 requirejs 插件。通過 ajax 請求來加載文本。

require.config({
    paths: {
       text: './lib/require/text'  
    },
    config: {
        // 配置 text
        text: {
            onXhr: function(xhr, url) {
                //發送ajax請求前
                xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
                
              	//Called after the XHR has been created and after the
                //xhr.open() call, but before the xhr.send() call.
                //Useful time to set headers.
                //xhr: the xhr object
                //url: the url that is being used with the xhr object.
            },
            createXhr: function() {
              	//覆蓋ajax請求對象
              
              	//Overrides the creation of the XHR object. Return an XHR
                //object from this function.
                //Available in text.js 2.0.1 or later.
            },
            onXhrComplete: function(xhr, url) {
              	//ajax請求完成之後
              
              	//Called whenever an XHR has completed its work. Useful
                //if browser-specific xhr cleanup needs to be done.
            }
   		}
    }
})

text 後面的路徑如果爲相對路徑，則相對的是當前 js 腳本所在的路徑。

// 前綴 text! 加載 /user.html 內容
require(['text!/user.html'], function(template) {
  $('#userinfo').html(template);
})

//使用 !strip 只獲取html的body部分內容
require(['text!/user.html!strip'], function(template) {
  $('#userinfo').html(template);
})

css 插件

https://segmentfault.com/a/1190000002390643

用於加載樣式文件的 requires插件。

https://github.com/guybedford/require-css

require.config({
    map: {
        '*': {
            css: './lib/require/css' // 當然也可以在 paths 下配置
        }
    },
    // paths: {
    //   css: './lib/require/css' 
    // }
})

// css! 前綴
require([
  'css!/css/jquery-ui/jquery-ui.css', 
  'css!/css/jquery-ui/jquery-ui.theme.css'
], function() {
    
})

require.config({
    map: {
        '*': {
            css: './lib/require/css'
        }
    },
    shim: {
      // 簡化
      'jquery-ui': [
        'css!/css/jquery-ui/jquery-ui.css',
        'css!/css/jquery-ui/jquery-ui.theme.css'
      ]
    }
})

require(['jquery-ui'], function() {
    
})

i18n 插件

i8n，支持國際化多語言，比如同時支持英語和中文。

require.config({
    paths: {
      i18n: './lib/require/i18n' 
    },
  	config: {
        i18n: {
            locale: 'en'
        }
    }
})

// nls/messages.js
define({
  zh: true,
  en: true
})

// nls/zh/messages.js
define({
  edit: '編輯'
})

// nls/en/messages.js
define({
  edit: 'Edit'
})

// 前綴 i18n! 相對的是當前腳本路徑
require(['i18n!../nls/messages'], function(i18n) {
    console.log(i18n) //{edit: 'Edit'}
})

如何指定使用那種語言：

通過瀏覽器的 navigator.language 或 navigator. userLanguage 屬性
通過配置文件 require.config 配置，可配合 cookie 實現切換

打包

參考文檔1

完成開發後並希望爲最終用戶部署代碼，可以使用優化器將 JavaScript 文件組合在一起並壓縮它。在上面的例子中，它可以將 main.js 和 helper/util.js 合併到一個文件中並壓縮。

開發階段：

不打包，不壓縮，模塊化開發

部署階段：

自動打包、壓縮

安裝環境

首先需要安裝 nodejs 環境，再安裝 requirejs，**npm install -g requirejs**
或下載 r.js 文件，使用 r.js 打包（這種方式可能更適合於服務器端打包）

命令打包

r.js.cmd -o baseUrl=src/js name=app out=build.js
或
node r.js -o baseUrl=src/js name=app out=build.js

baseUrl：設置打包的基礎目錄
name：要打包的文件名（不含後綴）
out：打包後輸出的文件名（需加後綴）

配置文件打包

node r.js -o app.build.js

({
    appDir: './src', //要打包的根目錄
    baseUrl: './js', //js文件在這個baseUrl下
    dir: './build',//打包後的輸出目錄
    mainConfigFile: 'src/js/main.js',//requirejs配置文件
    name: 'app', //打包哪一個模塊
})

多模塊打包

modules ：數組格式，列出所有需要打包的模塊。
當打包一個模塊時，默認會打包所有依賴的模塊。

({
    appDir: './src', //要打包的根目錄
    baseUrl: './js', //js文件在這個baseUrl下
    dir: './build',//打包後的輸出目錄
    mainConfigFile: 'src/js/main.js',//requirejs配置文件
  	optimize: 'none',//uglify
    modules: [{
        name: 'app',
        include: ['modernizr'],//一起打包的文件
        insertRequire: [],//額外加載模塊
        exclude: [], //移除打包的文件
        excludeShallow: ['backbone'], //淺移除
    }, {
      name: 'user'
    }]
})

把配置信息的 modules下的所有模塊建立好完整的依賴關係，再把相應的文件打包合併到 dir 目錄
把所有的 css文件中，使用 @import 語法的文件自動打包合併到 dir目錄
把其他文件複製到 dir 目錄，比如圖片、附件等

requirejs 插件打包

比如 text、css、i18n 插件。

({
    appDir: './src', //要打包的根目錄
    baseUrl: './js', //腳本的根路徑 相對於程序的根路徑
    dir: './build',//打包後的輸出到的路徑
    optimize: 'none',//打包結果優化; 壓縮等 uglify
    mainConfigFile: 'src/js/main.js',//requirejs配置文件
    inlineText: false, //是否打包text插件所引入的html文件
    // 需要打包合併的js模塊，數組形式，可以有多個
    // 比如 main 依賴 a 和 b，a 又依賴 c，則 {name: 'main'} 會把 c.js、a.js、b.js、main.js 合併成一個 main.js
    modules: [{
        name: 'app', //以 baseUrl 爲相對路徑，無需寫 .js 後綴
        include: [],//一起打包的文件 強制建立依賴關係
        insertRequire: [],//額外加載模塊
        exclude: [], //移除打包的文件
        excludeShallow: [],
    }],
    // 通過正則以文件名排除文件/文件夾
    // 比如當前的正則表示排除 .svn、.git 這類的隱藏文件
    fileExclusionRegExp: /^\./
})

css 打包
需要去 require-css 下載 css-builder.js 和 normalize.js 這兩個文件放到 css.js 同級目錄，就可以把 css 文件和模塊一起打包。

使用 npm工具打包

之前的打包命令難以記住，容易出錯，可以使用 npm init 生成 package.json 文件，配置 scripts 選項，然後執行 npm run-script 或者 npm run 命令。

{
  "scripts": {
  	"build" : "node src/r.js -o src/app.build.js"
  }
}