RequireJs打包簡單模塊打包

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

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *