requireJS對檔案合併與壓縮
RequireJS提供了一個打包與壓縮工具r.js,r.js的壓縮工具使用UglifyJS進行壓縮的或Closure Compiler。r.js下載
requireJS對互相依賴模組進行合併與壓縮,可以對JS,CSS壓縮,甚至可以對整個專案進行打包。r.js是基於nodeJS的,所以本機電腦上需要有node環境。
下面還是來看看我整個專案結構吧,如下:
現在是這樣的,app/a.js,app/b.js,app/c.js,app/d.js,有依賴關係,分別是a依賴於b,b依賴於c,c依賴於d,入口檔案app.js,
程式碼如下:
a.js
define(["app/b"],function (b) {
return {
"name":1
}
});
b.js
define(function(require, exports, module) {
var c = require('app/c');
});
c.js
define(function(require, exports, module) {
var d = require('app/d');
});
d.js
define(function(require, exports, module) {
alert(1);
});
app.js
require(['app/a'],function(jq){
});
如果我不壓縮與合併程式碼,那麼我們在瀏覽器下看請求如下:
現在我們一步步來解釋下合併與壓縮吧!
一:開啟cmd命令視窗,進入專案requirejs內,如下:
執行命令 node r.js –o baseUrl=js name=app out=build.js命令即可,如上所示已經在根目錄下生成build.js了,我們下面再來看看目錄結構如下:
下面我們再來看看build.js程式碼了,如下所示:
define("app/d",["require","exports","module"],function(e,t,n){alert(1)}),define("app/c",["require","exports","module","app/d"],function(e,t,n){var r=e("app/d")}),define("app/b",["require","exports","module","app/c"],function(e,t,n){var r=e("app/c")}),define("app/a",["app/b"],function(e){return{name:1}}),require(["app/a"],function(e){}),define("app",function(){});
已經對app.js,app/a.js,app/b.js,app/c.js,app/d.js,的程式碼進行合併與壓縮了。
接著我們在index.html程式碼要如下呼叫:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="require.js" defer async="true" data-main="build"></script>
</head>
<body>
</body>
</html>
直接從build.js內進行載入,現在我們再來看看瀏覽器內的請求如下所示:
現在只有2個請求了,且也可以執行裡面的程式碼了。
下面我們對命令分別來做一下解釋:
-o: 表示優化,該引數是固定的,必選。
baseUrl:指存模組的根目錄,可選。
name: 模組的入口檔案,這裡是app,那麼r.js會從baseUrl+name去查詢app.js,然後找出所有依賴的模組,然後進行合併與壓縮。
out: 指合併壓縮後輸出的檔案路徑,這裡是直接輸出在根目錄下build.js 我們也可以輸出到其他目錄下 比如js/app 目錄下,也可以的。
上面的demo已經可以對有依賴的模組進行合併與壓縮了,但是目前還不能滿足我們的需求,因為程式碼已經合併且壓縮了,對於我們調式程式碼並不是很方便,所以我接下來給大家來介紹另外1個引數:
1. optimize(none/uglify/colsure),指定是否壓縮,預設為uglify。
我們可以指定為none,只合並不壓縮。程式碼如下:
命令如下:
node r.js –o baseUrl=js name=app out=build.js optimize=none.
現在我們再來看看build.js檔案程式碼截圖如下:
現在是所有的js檔案在一個目錄下,那如果js檔案在不同的資料夾下面呢?是不是也可以合併呢?當然可以,只要指定依賴就可以了,我們再來演示下。加入我現在js目錄下在新建一個檔案叫app2,,如下所示:
現在在app2目錄下新建一個js檔案,假如叫e.js,那麼在app目錄下的d.js程式碼要改成如下了:
define(function(require, exports, module) {
var d = require('app2/e');
});
對app2/e.js進行依賴即可。
我們再來執行下命令如下所示:
如上可以看到e.js也被合併與壓縮了。
上面的是直接敲打命令,我們現在也可以先安裝r.js,安裝如下:
npm install –g requirejs
如下所示表示已經安裝成功了。
除了上面直接在命令列提供引數設定以外,也可以將引數寫入一個檔案,假定配置名稱為config.js,
程式碼如下:
({
baseUrl: "js",
name: "app",
out: "app-built.js"
})
然後進入相應的目錄,在命令列下使用r.js來執行config.js檔案,如下所示:命令:node r.js -o config.js
我們再看看生成檔案app-built.js,
在頁面上引入這個檔案也可以了。