seajs專案構建的總結

最近連續折騰了將近乙個星期的seajs構建。。踩了不少坑，總結了一些經驗，在這裡貼一下

用seajs做模組化開發，經常用到這個函式：

require("module/path/file");

或者

require("./file");

前者是頂級標識，後者是相對標識，總之都是傳遞給require()的引數，表示要載入別的模組

這個引數有2個意思，首先是代表路徑，根據這個路徑要能夠找到模組所在的檔案，否則直接返回了404，什麼也別談了。其次，還代表模組的id，如果根據路徑找到了模組檔案，但是模組的id（也就是define()的第乙個引數）不匹配，模組也無法載入成功，這稱為路徑與id的一致性

總之就是2個約束：路徑要能訪問到檔案，而且路徑和模組id要一致。這並不是commonjs規範的要求，這只是seajs自己的規定

這個規定看起來有點怪，比如node.js裡就沒有這個奇怪的約束，只要能根據路徑找到相應的檔案就行了。但是這是前端開發的特殊性決定的

server端的js，沒有合併的需求。但是前端的js在發布時一般都需要合併，以減少http請求數。所以開發的時候，可能根據業務邏輯，把模組劃分得很清楚：

user.js

employee.js

但是在部署的時候，會合併壓縮成只有乙個檔案：total.js

所以這就帶來乙個問題，require()的引數要如何寫？

在開發的時候：

require("user");// 可以找到user.js
require("total");// 此時還不存在total.js，因為還沒有合併

而在部署的時候正好相反：

require("user");// 此時已經不存在
require("total");// 可以找到total.js

問題在於，總不能每次上線之前還把**改一遍吧。所以就涉及到合併檔案的module_id要設定成什麼，合併後的檔名是什麼，合併後要如何壓縮，require()引數自動修改等，所以就需要配套的構建工具，來自動化處理這些由合併衍生的問題

不過這裡有乙個建議：每個模組都只對外暴露唯一的介面，並且就將這個介面的檔名，作為合併後的檔名。這是乙個取巧的方法，可以解決合併前後檔名不一致的問題

define(function(require, exports);
});

// package.js
define(function(require, exports));

// outter
define(function(require));

上面的示例**，前面2個檔案都是某個模組內部的，package是唯一的出口。第3個檔案需要依賴這個模組，只通過package.js來依賴，不直接依賴模組內部的a.js。然後合併以後的檔名，也叫做package.js，正好就一樣了，不會發生由於檔名改變而找不到檔案的問題

require("package");

這行**，無論在開發態還是部署態都是ok的

理論上可以自己構建seajs專案，但是實際上沒有人這麼做，因為太複雜。seajs的作者也強烈建議使用者使用官方配套的構建工具來構建專案

構建工具有2種，分別是spm-build和grunt-cmd-***

spm-build要求模組目錄下有package.json檔案，其中用屬性宣告要如何構建，然後執行spm-build就一條龍構建完了，包括檔案的uglify。方便倒挺方便，不過可配置性比較弱，而且如果用了angular的話，spm-build在uglify的時候，會把不該替換的變數名也替換了，還是需要人工干預一下

總的來說，如果想省事的話，用spm-build也就可以了。但是如果專案有一些特殊的需求，spm-build可能就滿足不了。另外spm-build不再是官方推薦的構建方式，後續的發展還不清楚

其實只有2個grunt外掛程式，分別是grunt-cmd-transport和grunt-cmd-concat，分別完成提取依賴和合併的工作，後續的uglify還是用grunt-contrib-uglify來做的

這種構建方法其實就把構建的流程打散，只提供2個task外掛程式，使用者自己控制構建過程，所以比較靈活。這也是官方推薦的構建方式。不過說實話，還比較複雜。構建過程可以看我的另外幾篇帖子

下面是乙個關鍵的：截至到目前，grunt-cmd-transport有乙個bug，提取後的js，會把間接依賴也寫入deps陣列，所以瀏覽器會發起很多無效的http請求。這個bug目前還沒有解決，但是用spm-build不會遇到這個問題。所以一定要慎重，詳情在：grunt-cmd-transport的bug

seajs專案構建的總結

用grunt構建seajs專案的總結

seajs模組路徑解析簡單總結

基於vue構建的spa專案總結一

seajs專案構建的總結

用grunt構建seajs專案的總結

seajs模組路徑解析 簡單總結

基於vue構建的spa專案總結 一

相關推薦

seajs模組路徑解析簡單總結

基於vue構建的spa專案總結一