require.js構建優化

想摸透javascript模塊化編程是怎麼一回事，在seajs和requirejs之間兜兜轉轉，看了許多相關資料和文章，算是大體理清它們的異同，撇開requirejs加載方式的另類（其實目前我暫時還沒去感覺），於寫法，比較喜歡requirejs的寫法，這個比較主觀，這也得益於阮一峯大大那篇Javascript模塊化編程（三）：require.js的用法，講得很清楚，反而我看seajs的文檔，反而迷迷糊糊。

其實模塊化編程不難理解，主要我仍是卡在了構建工具，壓縮合並的優化上，雖然seajs官網上有不少相關教程，但我就是不理解，簡直被本身蠢哭了。後來看到requirejs上有例子，就決定啃英文教程試一下。

須要用到node和npm，我直接在github上clone了requirejs的例子create-template-master因此能夠跳過r.js的安裝:

npm install -g requirejs
r.js -o app.build.js

例子已經有build.js，app目錄也已經搭建好，因此只須要下面一條命令，就自動幫你構建了。

node r.js -o build.js

build.js是命令行配置參數文件，因此能夠把build.js裏面的配置參數直接寫在上面那條命令的後面。like this：

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

看下build.js裏面怎麼寫：

{
    "appDir": "../www",     //待構建文件目錄
    "baseUrl": "lib",       //和require.js裏面基目錄（baseUrl）同樣
    "paths": {              //路徑指定，以下用app代替../app  
        "app": "../app"
    },
    "dir": "../www-built",  //構建目標文件目錄
    "modules": [            //這個應該是模塊配置，name表示入口文件
        {
            "name": "app"
        }
    ]
}

這是構建的log：

能夠對比一下構建先後，打開www/index.html和www-built/index.html的js加載有什麼不一樣。
未構建以前，所有js分開加載。

構建以後，只須要加載require.js和app.js。

構建以後，js已是壓縮合並的了，main.js，messages.js和print.js都合併到了app.js裏面。

---

css的優化，得再看下require.js的示例，而後再寫篇筆記記錄下來。