現在很多人都在用seaJs來開發項目,seaJs上手容易,操作簡單。但在后期做合並壓縮的時候卻中了個巨大無比的坑,但坑也總得有人來填。於是花了將近一個星期的時間來填了這坑,現將填坑的一些心得與大家分享。在網上搜了下相關的資料,不得不說網上資料很多的坑(都是復制別人的。。。),說多都是淚。下面總結下已找到的seaJs合並壓縮的幾種辦法,讓中坑的人盡快脫坑。
第一種:
在seaJs的官網上有他自帶的一個seajs-combo插件。看似不錯,和minify差不多。這種方法比較簡單粗暴:下載個JS文件引用到頁面,就可以用了。
第二種:
用gulp合並壓縮seaJs模塊,這種逼格相對高一些(如不能裝逼那和咸魚有什么區別~)。
用gulp合並壓縮seaJs,在網上也有很多相關的模塊。試過很多模塊,但真正適合用的卻不多。我們先講合並這塊:gulp-seajs-combo 與 gulp-seajs-combine 這兩個好用易學的模塊。下面講下這兩個模塊都適用於什么文件結構。
gulp-seajs-combo:
gulp應用——
文件結構——主件a.js,調用文件b.js\c.js\d.js(d.js是按需加載):
如果在沒有合並之前頁面調用a.js是可以正常使用的。但是合並之后的dist/js下的a.js是否可以正常使用呢?我們來看下合並過后的a.js文件:
很好,文件:a.js\b.js\c.js已經合並在同一個文件里,並自動給其按路徑命名了id。但是頁面在調用a.js文件的時候卻不能正常使用。這是因為這些模塊都在同一個文件內,seaJs不知道該運行哪一個模塊了。如果我們在這個文件后面加上seajs.use("a"),這里就可以正常使用了。(這種辦法是很挫,但不失為一個方法。)ok,這里應該有人會說,那我們在a.js文件加個seajs.use("a");這句不就行了嘛。這個主意不錯,我們可以測試一下:
在gulp jscombo時發現一個錯誤:錯誤內容為a.js文件不能找到,因為打包的本身是a.js文件,在a.js文件里在引用a.js文件當然是不能找到了。如圖:
那么運行的結果是什么呢?a.js文件被多復制一份出來,雖然頁面上是有了seajs.use('a');但是b.js\c.js文件並沒有合並進來,這時通常我們會說:然而這並沒有什么卵用!
那么正確的使用方法應該是怎么樣的呢?這時需要一個入口文件,來告訴它文件第一個運行的是什么模塊,但這個入口又不能寫在自身模塊當中。於是就有了main.js這個入口文件。
先修改下gulp配置,把打包合並的路徑指向main.js

main.js這么寫

運行下gulp jscombo看下結果

完美!此時頁面引用combo里的main.js能正常的使用。看到這里不知你是否學會了用 gulp-seajs-combo合並你的seaJs了呢?
gulp-seajs-combo 要求入口文件與主體文件分離,在一些已經成型的項目上
已經有N多的JS文件,線上的打包與線下的開發版本路徑要相對應該的匹配進去目錄路徑切換才好進行切換測試。例如一個站點:

如果我們在添加一個root的入口文件並要改動原頁面引用的js名,那不是大大的增加自己的勞動量嗎?這個勞動並不光榮,而是在自殘~(感情我這是在作死啊……)。那怎么辦呢?
這時gulp-seajs-combine就閃亮的登場了。
gulp-seajs-combine
gulp應用——
文件結構——主件a.js,調用文件b.js\c.js\d.js(d.js是按需加載):
想必各位已經注意到了,沒錯。就是把入口寫在自身文件中。那么我們來運行一下jscombine壓縮出來的結果是怎么樣的呢?我們來看下
哈哈哈,顫抖吧。這時我們只需要把線下的路徑設置為src文件夾,線上的路徑為dist文件夾就可以達到線上與線下同步,只需要切換配置路徑就可以回來測試了。
看到這里,大家應該知道如何把自己的seaJs項目進行合並了吧。
致於壓縮這塊呢,可以用gulp-uglify這個模塊可以和(gulp-seajs-combo 或 gulp-seajs-combine)一起使用:
那么合並壓縮后的最終結果是這樣的:
使用gulp-uglify要記得排除混淆關鍵字,不然會把seaJs的'require', 'exports', 'module'也給混淆了,這樣會讓文件報錯運行不了的哦。