RequireJS進階

進階的前面兩篇講述了r.js如何經過命令行把全部的模塊壓縮爲一個js文件或把全部的css壓縮爲一個css文件。其中包括一些壓縮配置參數的使用。

但以上兩種方式有幾個問題

一、經過命令手動配置壓縮選項顯得很呆板
二、都僅合併爲一個文件

對於最後只生成一個文件的庫來講，這種方式並沒有不妥。好比jQuery，它的工程中小文件有20多個，打包後只有一個jquery-1.x.x.js。對於多數實際應用項目來講，可能打包後須要生成多個js文件。有些是頁面打開時就要用到的，有些是用戶點擊或輸入時按需加載的。

r.js有另一種方式來合併壓縮，即經過一個配置文件（如build.js）。配置文件內部採用前端工程師很是熟悉JSON格式。這樣當項目開發目錄固定後，配置文件也相應固定。經過配置文件就很好的隔離了開發環境及上線環境。

此次咱們建立的目錄中包含全部前端資源，js，css，圖片。

其中有兩個頁面page1.html，page2.html。這兩個頁面分別使用page1.js和page2.js。

page1.js依賴於event和selector，page2.js依賴於event、selector和jQuery。jQuery是非本地的，沒有合併前咱們直接訪問這兩個頁面，那麼單個的js文件會依次下載。

如今使用r.js來合併壓縮，使每一個頁面除下載require.js外只下載各自合併的大文件page1.js和page2.js。

build.js以下

({
    appDir: "./",
    baseUrl: "js",
    dir: "../r6-built",
    paths: {
        jquery: 'empty:'
    },
    modules: [
        {
            name: "page1"
        },
        {
            name: "page2"
        }
    ]
})