小心!AngularJS結(jié)合RequireJS做文件合并壓縮的那些坑
在項目使用了AngularJS框架,用RequireJS做異步模塊加載(AMD),在做文件合并壓縮時,遇到了一些坑,有些只是解決了,但不明白原因。
那些坑
1. build.js里面的paths必須跟main.js里面的保持一致。
這個build.js就是r.js使用的配置文件,而main.js就是RequireJS的main文件。在合并壓縮時候,build.js文件里面也需要寫paths,而且還是跟main.js一樣,我很奇怪為什么就不能識別main里面的require.config的paths,省得合并的時候還要將paths拷貝過來(我試過build.js里面沒有paths,是不能合并的)。(-_-!!!)
2. 某些依賴庫需要寫整個相對路徑才能做合并。
在項目里, 我使用一個叫l(wèi)ayer的第三方庫(庫是以requireJS define寫的),一開始只做開發(fā)時候,在paths配置了路徑后,使用此庫只需要用個簡稱(define依賴時候)。 但在做合并時候,竟然提示文件不存在(因為直接拿簡稱去拼文件地址了),無奈之下只能修改這個庫的使用辦法,全部使用到這個庫的都寫整個相對路徑,這個時候開發(fā)和做合并才沒有錯。
3. 合并之后可以運行,加上壓縮就不可以。
這個是最嚴重問題,最嚴重問題,最嚴重問題。在文件合并壓縮后,使用文件時候,AngularJS運行就不正常了,總是報模塊初始化失敗,Failed to instantiate module common due to: Error: [$injector:unpr] Unknown provider: e,如下圖。
很關(guān)鍵的一個點就是,不壓縮可以用,一旦壓縮了(用了默認的壓縮),使用就會報錯。所以思考必定某些東西被“壓壞”了,網(wǎng)上某些文章都說是需要下面這樣寫AngularJS cntroller、directive等,使用的服務(wù)用字符串定義。
commonModule.controller( "broswerCtrl" ,["$scope" ,"$sce" , function ($scope,$sce){
可是我的整個應(yīng)用就是這樣定義,并沒有給它注入錯誤的機會。最后在無奈之下,就只能配置mangle: false,不混淆變量名,這樣做后,合并壓縮的文件就能正確使用了?。?!
PS:簡單說法就是,合并壓縮可以,變量名不能混淆(總覺得怪怪的),感覺問題暫時無解。
4. 第二層的require,做合并的時候,是合并不出來。
例如在mian.js里面這樣加載模塊,在合并時候會發(fā)現(xiàn)第二層的require并沒有被合并到。
require([ "COMMON"], function(){ require([ "angular", "LOGIN" ], function(angular){ //.... }); });
這時需要在build.js加findNestedDependencies: true, 這時才會合并第二層。
合并準備
1、安裝nodejs
文件合并壓縮基于nodejs,所以先安裝nodejs。
2、下載r.js
r.js配合requirejs模塊寫法對文件進行合并,壓縮。
簡單配置
配置文件最好寫一個build.js,如下:
({ baseUrl:"../", paths: { //... }, shim: { //... }, optimize: "uglify2", uglify2: { mangle: false //false 不混淆變量名 }, findNestedDependencies: true, name: "js/main", out: "../js/main-built.js" })
這里就講幾個關(guān)鍵屬性:
baseUrl:所有的模塊(般就是js)都相對于這個路徑存在。
optimize:優(yōu)化腳本文件的方式,有下面5種取值方式。
- uglify:(默認) 用UglifyJS壓縮。
- uglify2: 用UglifyJS2( 2.1.2+)壓縮。
- closure: 使用Google's Closure Compiler 簡單優(yōu)化模式壓縮文件, 僅在優(yōu)化工具使用Java有效。
- closure.keepLines:跟closure參數(shù)一樣, 只不過保留換行符。
- none: 不做壓縮。
findNestedDependencies:尋找require()里面的require或define調(diào)用的依賴。
PS:配置屬性還有很多,就不一細細說了。當文件配置好后,就執(zhí)行命令合并壓縮
node r.js -o build.js
總結(jié)
RequireJS模塊的合并壓縮還是比較簡單的,但是遇到AngularJS,在壓縮方面就有些問題了,目前沒找到什么更好辦法。
以上就是本文的詳細內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
設(shè)為首頁和收藏的Javascript代碼(親測兼容IE,Firefox,chrome等瀏覽器)
這篇文章主要介紹了設(shè)為首頁和收藏的Javascript代碼(親測兼容IE,Firefox,chrome等瀏覽器)。需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11基于JS實現(xiàn)將JSON數(shù)據(jù)轉(zhuǎn)換為TypeScript類型聲明的工具
在TypeScript?項目中,我們經(jīng)常需要使用聲明一系列的ts類型。然而,手動寫的效率實在太低,本文就實現(xiàn)一個工具將?JSON?數(shù)據(jù)轉(zhuǎn)換為?TypeScript?類型定義,需要的可以參考一下2023-04-04JavaScript中函數(shù)聲明與函數(shù)表達式的區(qū)別詳解
可能很多朋友只知道兩種聲明方式一個是函數(shù)聲明一個是函數(shù)表達式,具體有什么不同沒能說得很好。事實上,JavaScript的解析器對函數(shù)聲明與函數(shù)表達式并不是一視同仁地對待的。下面看看這兩者到底有什么不同。2016-08-08JS 中使用Promise 實現(xiàn)紅綠燈實例代碼(demo)
本文通過實例代碼給大家介紹了JS 中使用Promise 實現(xiàn)紅綠燈效果,在文中給大家介紹了一個promise用法例子,需要的朋友可以參考下2017-10-10淺談使用splice函數(shù)對數(shù)組中的元素進行刪除時的注意事項
下面小編就為大家?guī)硪黄獪\談使用splice函數(shù)對數(shù)組中的元素進行刪除時的注意事項。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-12-12使用BootStrap建立響應(yīng)式網(wǎng)頁——通欄輪播圖(carousel)
這篇文章主要介紹了使用BootStrap建立響應(yīng)式網(wǎng)頁通欄輪播圖(carousel)的相關(guān)資料,需要的朋友可以參考下2016-12-12JavaScript定時器setTimeout()和setInterval()詳解
這篇文章主要為大家詳細介紹了JavaScript定時器setTimeout()和setInterval()的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-08-08