序
本文講解的是requireJS對文件合併與壓縮的實現方法。
RequireJS提供了一個打包與壓縮工具r.js,r.js的壓縮工具使用UglifyJS進行壓縮的。
requireJS對互相依賴模塊進行合併與壓縮,可以對JS,CSS壓縮,甚至可以對整個項目進行打包。r.js是基於nodeJS的,所以本機電腦上需要有node環境。
一下內容基於已經安裝nodejs和git的條件下進行。
r.js的安裝
全局安裝requirejs即可,命令如下
$ npm install -g requirejs
打包前的目錄結構
與RequireJs模塊化基礎 目錄一致,只是多了一個build.js
文件,在這裏不再展示其他文件的具體內容。
build.js
({
appDir: '../js', //打包的根路徑
baseUrl: './', //依賴的根路徑,以打包路徑爲前提
dir: '../build', //打包後生成的文件路基
mainConfigFile: './config.js', //打包依賴配置文件
name: 'app' //需要打包的主要模塊,以baseUrl路徑爲基礎
})
r.js打包
在build.js
所在的目錄下執行以下命令即可
r.js -o build.js
執行完畢後會生成一個build
文件夾,新的目錄如下:
其實build
目錄下真正有用的文件就只有app.js
,另外既然打包完畢,我們就需要調整以下main.js
的依賴,main.js
需要變動的內容如下:
/*
* 在沒有配置baseUrl參數以前,
* 所有的依賴都是以入口html文件爲根目錄,
* 所以下面的依賴是未修改baseUrl路徑之前的依賴
* */
var debug = false; //true表示開發過程中,false表示打包完畢後
if (debug) {
require(['./config/config', './js/app']); //打包前
} else {
require(['./build/app']); //打包後可以直接使用build目錄下的app.js即可
}
如果是一個像本文這樣一個簡單的項目,r.js
打包就是這麼簡單,但是當需要打包多個模塊的時候,我們需要進一步配製build.js
。具體配製請看下回分解。