前言:Requirejs作為一個ES5環境流行的模塊加載器，在很多項目中使用它。而且這個開源庫任然在更新，同類產品seajs已經不更新了。
ES6之后引入import 或者使用Commonjs的方式引入模塊，在未來方向上將替換Requirejs是必然的。
一個產品是否選用ES6來開發仍然需要面臨很多問題。
<1>.ES6還不能為瀏覽器全部識別，發布之前要編譯，調試起來比瀏覽器上提示復雜得多。
<2>.應用ES6 必然要一定的高水平的開發資源，ES6 ,webpack等構建工具都需要一定的學習曲線。
<3>.老項目基本上很難遷移，那意味着很多組件很可能要重新書寫。
所以requirejs任然是開源模塊加載器首選。
一.Requirejs幫我們實現那些功能。
1.聲明不同js文件之間的依賴
2.可以按需、並行、延時載入js庫
3.可以讓我們的代碼以模塊化的方式組織
二.一個簡單的Requirejs的產品如何搭建
1.在html中引入Requirejs ,<script data-main="js/app.js" src="js/require.js"></script>
其中data-main中對應的路徑是Requirejs配置的主入口， data-main和 src中路徑都是相對html的路勁，或者是絕對路徑
2.data-main文件內容，比如本例中的js/app.js文件
requirejs.config({ baseUrl:'js/lib', paths :{ app:'../app' } }); require(["app/start"], function(app) { app.hello(); });
2.1 baseUrl為模塊(module)的根目錄，如果require(依賴) 的模塊直接是用文件名作為id的會直接在這個目錄尋找同名文件資源
2.2 paths 中的屬性可以給不同的路徑或者文件別名，如果require(依賴) 的模塊使用路徑作為id的時候可以 通過別名匹配path中路徑,
3.定義模塊(module)
requirejs提供了多種定義模塊的方式，可以使用/不使用依賴，返回變量，返回對象，函數，可使用CommonJs的方法在export,module中返結果
本例中是定義了一個無依賴的模塊
define([], function() { return { hello: function() { alert("hello, world"); } } });
還有一種定義了模塊id 的定義方式，如:jquery源代碼中的，申明過id的不能直接使用path定義其他別名訪問
if ( typeof define === "function" && define.amd ) { define( "jquery", [], function() { return jQuery; } ); }
4.shim配置: 將某個依賴中的某個全局變量暴露給requirejs，當作這個模塊本身的引用
如官網中例子 ，把backbone.js引入拋出Backbone作為模塊名引入，dept中申明它需要的依賴，backbone依賴underscore 和jquery
requirejs.config({ shim: { 'backbone': { deps: ['underscore', 'jquery'], exports: 'Backbone' }, 'underscore': { exports: '_' } } });
對於不依賴於requirejs的庫， 除了把js改為require.js的amd方式書寫,還能使用shim來拋出全局對象。
/* util.js */
function util(){ alert("i am util"); }
/** app.js **/
requirejs.config({ baseUrl:'js/lib', paths :{ app:'../app', util:'../util' }, shim:{ util: { exports: 'util' } } }); require(["util"], function(util) { util(); });
暴露多個全局函數
/* util.js */
function util() { alert("hello, util~"); } function util2() { alert("hello, util2~"); }
/** app.js **/
requirejs.config({
baseUrl:'js/lib',
paths :{
app:'../app',
util:'../util'
},
shim:{
util: {
init: function() {
return {
util: util,
util2: util2
}
}
}
}
});
require(["util"], function(util) {
util.util();
util.util2();
});
5.關於打包壓縮，requirejs官方提供了一套打包工具r.js 只要配置對應的build.js可以幫助我們自動化構建
具體例子 https://github.com/volojs/create-template
build.js如何配置可以參考 Richard Chen的翻譯 http://www.chenliqiang.cn/node/22
官網配置說明http://requirejs.org/docs/optimization.html
5.1 構建js
{ "appDir": "../www", //打包前目錄 "mainConfigFile": "../www/app.js", //打包入口文件 "dir": "../www-built", //打包后生成文件 "modules": [ //注意如果要分包，把依賴和主文件分開，需參考modules 第⑶種配置 { "name": "app" //指定生產文件的文件名 } ] }
運行命令
node tools/r.js -o tools/build.js
5.2構建css文件
需要一個css文件使用@import 包含所有依賴的css文件，
@import "bootstrap.min.css"; @import "font-awesome.min.css"; @import "main.css";
node build/r.js -o cssIn=../www/css/styles.css out=../www-built/css/all.css optimizeCss=standard
如果構建多頁面，以及構建多頁面使用shim的，請參考官網例子
https://github.com/requirejs/example-multipage
https://github.com/requirejs/example-multipage-shim
主要是配置modules來處理模塊加載，分包，給頁面和資源文件重命名。
6.關於插件(Plugins) ,Requirejs官方提供了5個插件 domReady il8n text step order
其中 step order在新版本中已經不支持了，il8n做國際化的，domReady 勇於引入其他amd加載器。
text.js 可以配置依賴css ,htm等模版文件，支持html或者模版ajax加載，我和我工作過的一家公司用過這個插件，多模塊化十分好用，后台系統可以經常讓用戶清空緩存的可以用
但是用r.js來構建的時候會悲劇，最主要的是css合並的問題，使用這種方式加載css合並后十分不友好的，畢竟css都是顆粒加載經來的，發布新版本css資源文件為了防止緩存經常會使用路徑加版本號，或者文件md5改名，
https://github.com/requirejs/requirejs/wiki/Plugins