上一節講了模塊化的背景，爲什麼會需要模塊化。在講更深入一點的Sea.js解決模塊化問題之前，我想有必要了解一下模塊化的發展進程。
1.模塊化的發展進程
2009年Ryan Dahl這個傢伙發佈了第一個版本的Node.js，其實第一次我接觸到這個東東的時候以爲是類似於jQuery的一個JavaScript類庫，事實上這個理解是錯誤的。Node.js是一個服務器端運行的程序，可以說Node是一個Javascript運行環境(runtime)，類似於WEB服務器這個概念。從此這個Node顛覆了我對WEB開發的認識，這個傢伙在以後的發展中一定前途無量。具體點擊這裏。作爲服務端運行的容器必須提供一系列的類庫類似於Java中的JDK中的類庫一樣，提供http,concurrent,exception等等的功能。所以必須要有一套服務端的JavaScript規範這個時候就出現了commonJS這一套規範，使得在服務端JavaScript有了一個標準。在這之後瀏覽器端的JavaScript程序也相繼出現了一系列的規範來對程序模塊化進行規範。瀏覽器模塊化規範有兩大陣營：
AMD規範
典型代表：RequireJS
AMD 即Asynchronous Module Definition，中文名是“異步模塊定義”的意思。它是一個在瀏覽器端模塊化開發的規範，服務器端的規範是CommonJS。模塊將被異步加載，模塊加載不影響後面語句的運行。所有依賴某些模塊的語句均放置在回調函數中。CMD規範
典型代表：Sea.js
其實這兩大陣營的規範都是借鑑commonJS規範發展而來的，這樣才能推動JavaScript朝着好的方向發展，同時Node.js的出現將會衝擊Java.NET\PHP等霸佔的WEB份額，拭目以待。
2.Grunt構建工具用來幹什麼呢
經常在我們在PC上開發的時候按照一定的規範碼代碼，實際上在看到上線後的項目代碼都是被壓縮後和合並後的代碼。如果從PC開發、模塊合併、線上發佈這一系類的流程都是手動進行的話，項目大了，說不定會發什麼什麼事情呢，你可以想象一下。。。這個時候就要藉助於Grunt這個項目構建工具了
如何使用請看下面流程化的操作：
第一步安裝Node.js
官網選擇適合自己的PC版本，然後一步一步下一步，OK…最後記得將Node安裝目錄配置到環境變量中
第二步安裝Grunt
如下圖：一步步安裝，如果命令不理解，先用着….
然後運行、並且如果看到版本信息，表示成功安裝了…
OK,Grunt Task Runner安裝大功告成。
3.合併和壓縮項目中的各個模塊
第一步 合併各個模塊的JS文件
1.切換到項目的目錄目錄中例如我的項目如下圖：
2.在當前項目中便寫package.json文件
其中合併插件在這裏找到搜索到的，package.json裏面的內容可以在這裏找到。
{
"name": "box",//項目名稱
"version": "0.1.0",//版本號
"devDependencies": {
"grunt": "~0.4.5",//當前grunt版本
"grunt-contrib-concat": "~0.5.1"//合併插件
}
}然後CMD中切換到當前項目目錄中執行如下命令：
當前文件夾中多了一個目錄如下圖：
3.在當前項目目錄中編寫項目構建文件Gruntfile.js如上圖：
module.exports = function(grunt) {
//grunt的初始化配置
grunt.initConfig({
//讀取配置文件
pkg: grunt.file.readJSON('package.json'),
concat: {
box:{
//將main.js drag.js bigger.js中的內容合併到dist文件夾main.js中
files:{
'dist/main.js':['main.js','drag.js','bigger.js']
}
}
}
});
//加載任務
grunt.loadNpmTasks('grunt-contrib-concat');
//註冊任務
grunt.registerTask('default', ['concat']);
};然後在CMD中執行grunt命令如下圖：
可以發現在項目中多了一個文件夾dist，而且種種的main.js合併了其他幾個js文件中的所有內容。用同樣的方法可以完成模塊代碼的壓縮。
第二步 壓縮模塊中JS代碼
1.在package.json中添加壓縮插件的代碼如下：
{
"name": "box",//項目名稱
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-concat": "~0.5.1",//合併插件
"grunt-contrib-uglify": "~0.8.0"//壓縮插件
}
}重新執行npm install命令下載壓縮插件。
2.修改Gruntfile.js如下：
module.exports = function(grunt) {
//grunt的初始化配置
grunt.initConfig({
//讀取配置文件
pkg: grunt.file.readJSON('package.json'),
concat: {
box:{
//將main.js drag.js bigger.js中的內容合併到dist文件夾main.js中
files:{
'dist/main.js':['main.js','drag.js','bigger.js']
}
}
},
uglify: {
box:{
//將main.js進行壓縮
files:{
'dist/main.min.js':['dist/main.js']
}
}
}
});
//加載任務
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-contrib-uglify');
//註冊任務
grunt.registerTask('default', ['concat','uglify']);
};然後再CMD中執行 grunt 命令就可以在項目dist文件夾中發現壓縮版的main.min.js文件。
到此JavaScript中模塊化解決方案中的項目文件合併和壓縮全部完成，下一講將會介紹Sea.js和Grunt聯合開發，深入理解Sea.js的應用。
參考文章列表：
非常高興和大家交流學習
自由轉載，創意許可，請文章來源，來自這裏
(http://blog.csdn.net/unikylin)