AngularJS分別RequireJS做文件合并壓縮的那些坑

小心！AngularJS合并RequireJS做文件離開壓縮的那些坑

小心！AngularJS合并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. 某些依賴庫必要寫整個絕關于門路才氣做離開。

正在項目里， 我運用一個叫layer的第三方庫（庫因而requireJS define寫的），一起頭只做開拓時辰，正在paths設置了門路后，運用此庫只必要用個簡稱（define依賴時辰）。 但正在做離開時辰，竟然提示文件不存正在（因為間接拿簡稱去拼文件地點了），無法之下只能修改這個庫的運用辦法，全數運用到這個庫的都寫整個絕關于門路，這個時辰開拓和做離開才沒有錯。

3. 離開以后可以運轉，加之壓縮就不行以。

這個是最緩和標題，最緩和標題，最緩和標題。正在文件離開壓縮后，運用文件時辰，AngularJS運轉就不個別了，老是報模塊初始化得勝，Failed to instantiate module co妹妹on due to: Error: [$injector:unpr] Unknown provider: e，以下圖。

很關頭的一個點便是，不壓縮可以用，一旦壓縮了（用了默認的壓縮），運用就會報錯。以是斟酌一定某些工具被“壓壞”了，網上某些文章都說是必要前面多么寫AngularJS cntroller、directive等，運用的辦事用字符串概念。

co妹妹onModule.controller( "broswerCtrl" ,["$scope" ,"$sce" , function ($scope,$sce){

不過我的整個運用便是多么概念，并無給它注入過失的時機。起初正在無法之下，就只能設置mangle: false，不混雜變量名，多么做后，離開壓縮的文件就可以準確運用了！！！

PS：龐雜說法便是，離開壓縮可以，變量名不克不及混雜（總覺得怪怪的），覺得標題暫時無解。

4. 第二層的require，做離開的時辰，是合其實不進來。

比喻正在mian.js內里多么加載模塊，正在離開時辰會看見第二層的require并無被離開到。

require([ "CO妹妹ON"], function(){
  require([ "angular", "LOGIN" ], function(angular){
   //....
  });
});

這時分必要正在build.js加findNestedDependencies: true, 這時分才會離開第二層。

離開籌備

一、安放nodejs

文件離開壓縮基于nodejs，以是先安放nodejs。

二、下載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"
})
此處就講多少個關頭屬性：

baseUrl：整個的模塊（般便是js）都絕關于付這個門路存正在。

optimize：優化劇本文件的方式，有前面5種取值方式。

uglify：（默認） 用UglifyJS壓縮。

uglify2： 用UglifyJS2（ 2.1.2+）壓縮。

closure： 運用谷歌's Closure Compiler 龐雜優化情勢壓縮文件, 僅正在優化貨色運用Java有用。

closure.keepLines：跟closure參數同樣, 只可是保留換行符。

none： 不做壓縮。
findNestedDependencies：探究require()內里的require或許define調用的依賴。

PS：設置屬性另有不少，就紛歧細細說了。當文件設置好后，就實施號召離開壓縮

node r.js -o build.js
總結

RequireJS模塊的離開壓縮仍是有點龐雜的，可是遇到AngularJS，正在壓縮方面就有些標題了，今朝沒找到甚么更好辦法。

以上便是本文的詳細內容，但愿關于各人的深造有所幫助。