require.js實現js模塊化編程（二）：RequireJS Optimizer

require.js實現js模塊化編程（二）：RequireJS Optimizer

這一節，咱們主要學習一下require.js所提供的一個優化工具r.js的用法。

一、認識RequireJS Optimizer
RequireJS Optimizer是對腳本的優化支持目前流行的 UglifyJS 和 Closure Compiler 兩種壓縮方式，UglifyJS 須要 NodeJS 環境支持，而 Closure Compiler 則須要 Java 環境。這篇文章是以運行於 NodeJS 的 UglifyJS 來優化的，這也是 RequireJS Optimizer 默認的壓縮方法。

二、環境的需求及運行方法
首頁須要安裝 Node 0.4.0 或更高版本，而後下載 r.js，下載好之後就能夠在命令行裏對前端代碼進行優化了。
r.js 的參數傳遞使用方式：
一是直接加在命令行後面，以下：

node r.js -o baseUrl=. paths.jquery=some/other/jquery name=main out=main-built.js

二是新建一個配置文件，例如 build.js（推薦使用這種方式），這樣配置更方便，以下：

node r.js -o build.js

三、項目結構及build.js配置

以下：

({
    baseUrl: ".",
    name: "main",
    //dir:"dist/",   // 輸出目錄的路徑。若是不設置，則默認爲和 build 文件同級的 build 目錄。
    optimize: "uglify",  //JavaScript 代碼優化方式
    optimizeCss:"standard.keepLines",  //CSS 代碼優化方式
    //mainConfigFile: "main.js",
    //removeCombined: true,
    //fileExclusionRegExp: /^\./,
    //modules:[{}],  //定義要被優化的模塊數組。
    paths: {
        "common": "./libs/common",
        "countObject": "./core/countObject",
        "dependCount": "./core/dependCount",
        "countFunction": "./core/countFunction",
        "dateUtil": "./core/dateUtil",
        "stringUtil": "./core/stringUtil"
    },
    shim: {
        dateUtil: {
            deps: [],
            exports: 'DateUtils'
        },
        stringUtil: {
            deps: [],
            exports: 'StringUtils'
        }
    },
    out: "./dist/main-built.js"   // 合併壓縮以後js目錄
})

按照build.js配置文件，運行node r.js -o build.js ,效果以下：

生成合並以後的壓縮文件位於 /dist/main-built.js，在index.html頁面中引入便可，以下：

<script src="js/libs/require.js" data-main="js/dist/main-built"  defer async="true"></script>

build.js基本參數介紹

•     appDir

　　應用程序的最頂層目錄。可選的，若是設置了的話，r.js 會認爲腳本在這個路徑的子目錄中，應用程序的文件都會被拷貝到輸出目錄（dir 定義的路徑）。若是不設置，則使用下面的 baseUrl 路徑。

• 　baseUrl

　　默認狀況下，全部的模塊都是相對於這個路徑的。若是沒有設置，則模塊的加載是相對於 build 文件所在的目錄。另外，若是設置了appDir，那麼 baseUrl 應該定義爲相對於 appDir 的路徑。

• 　dir

　　輸出目錄的路徑。若是不設置，則默認爲和 build 文件同級的 build 目錄。

• 　optimize

　　JavaScript 代碼優化方式。可設置的值：

• • ● "uglify：使用 UglifyJS 壓縮代碼，默認值；
  • ● "uglify2"：使用 2.1.2+ 版本進行壓縮；
  • ● "closure"： 使用 Google's Closure Compiler 進行壓縮合並，須要 Java 環境；
  • ● "closure.keepLines"：使用 Closure Compiler 進行壓縮合並並保留換行；
  • ● "none"：不作壓縮合並；
• 　optimizeCss

             CSS 代碼優化方式，可選的值有：

● "standard"：標準的壓縮方式；
● "standard.keepLines"：保留換行；
● "standard.keepComments"：保留註釋；
● "standard.keepComments.keepLines"：保留換行；
● "none"：不壓縮；

•   mainConfigFile

　　若是不想重複定義的話，可使用這個參數配置 RequireJS 的配置文件路徑。

• 　removeCombined

　　刪除以前壓縮合並的文件，默認值 false。

• 　fileExclusionRegExp

　　要排除的文件的正則匹配的表達式。

• 　modules

       定義要被優化的模塊數組。每一項是模塊優化的配置，經常使用的幾個參數以下：

1. name：模塊名；
2. create：若是不存在，是否建立。默認 false；
3. include：額外引入的模塊，和 name 定義的模塊一塊兒壓縮合並；
4. exclude：要排除的模塊。有些模塊有公共的依賴模塊，在合併的時候每一個都會壓縮進去，例如一些基礎庫。使用 exclude 就能夠把這些模塊在壓縮在一個更早以前加載的模塊中，其它模塊不用重複引入。

　RequireJS Optimizer 的配置參數還有不少，完整的參數介紹能夠看這裏。

四、main.js

require(['_main_']);
define("_main_", ["common", "countObject", "countFunction", "dependCount", "dateUtil", "stringUtil"], function( common, countObject, countFunction, dependCount, dateUtil, stringUtil) {
    stringUtil.toUpperCase();
    dateUtil.toString();

    window.StringUtils.toUpperCase();
    window.DateUtils.toString();
});

五、批處理文件start.bat
若是不想每次都輸入node r.js -o build.js去進行打包壓縮，能夠定義這樣一個批處理文件start.bat,注意更改文件的路徑。雙擊該文件，便可自行批處理進行打包。

@echo off
echo build...
e:
cd E:\ownstudy\require\requirejs_Demo_r\js
 
node r.js -o build.js
 
echo Press any key to exit!
echo. & pause

RequireJS Optimizer項目地址，請自行下載，謝謝關注。