序
本文講解的是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 。具體配制請看下回分解。