RequireJs使用快速入門

時間 2019-11-14

標籤 requirejs 使用快速入門欄目 JavaScript 简体版

原文原文鏈接

前言:Requirejs做爲一個ES5環境流行的模塊加載器，在不少項目中使用它。並且這個開源庫任然在更新，同類產品seajs已經不更新了。

ES6以後引入import 或者使用Commonjs的方式引入模塊，在將來方向上將替換Requirejs是必然的。javascript

一個產品是否選用ES6來開發仍然須要面臨不少問題。css

<1>.ES6還不能爲瀏覽器所有識別，發佈以前要編譯，調試起來比瀏覽器上提示覆雜得多。html

<2>.應用ES6 必然要必定的高水平的開發資源，ES6 ,webpack等構建工具都須要必定的學習曲線。java

<3>.老項目基本上很難遷移，那意味着不少組件極可能要從新書寫。node

因此requirejs任然是開源模塊加載器首選。jquery

一.Requirejs幫咱們實現那些功能。

1.聲明不一樣js文件之間的依賴webpack

2.能夠按需、並行、延時載入js庫git

3.可讓咱們的代碼以模塊化的方式組織github

二.一個簡單的Requirejs的產品如何搭建

1.在html中引入Requirejs ,`<script data-main="js/app.js" src="js/require.js"></script>`

其中data-main中對應的路徑是Requirejs配置的主入口， data-main和 src中路徑都是相對html的路勁，或者是絕對路徑web

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來處理模塊加載，分包，給頁面和資源文件重命名。