注意深い！ AngularJS と RequireJS_javascript スキルを組み合わせたファイルのマージと圧縮の落とし穴

プロジェクトでは AngularJS フレームワークが使用され、非同期モジュール読み込み (AMD) に RequireJS が使用されました。いくつかの落とし穴に遭遇しましたが、その理由はわかりませんでした。

あの穴
1. build.js のパスは main.js のパスと一致している必要があります。

この build.js は r.js で使用される設定ファイルで、main.js は RequireJS のメイン ファイルです。マージして圧縮するとき、パスも build.js ファイルに記述する必要がありますが、それらは main.js と同じままです。なぜ main の require.config のパスが認識されず、保存できないのか、非常に驚​​きました。マージ時にパスをコピーする必要があります（build.jsにパスがないためマージできないことを試しました）。 (-_-!!!)

2. 一部の依存ライブラリでは、マージする前に相対パス全体を書き込む必要があります。

プロジェクトでは、layer というサードパーティのライブラリを使用しています (ライブラリは最初だけ開発していたときは、path にパスを設定した後、省略形を使用するだけで済みました)。 (定義) このライブラリを使用するには時間に依存します)。 しかし、マージを実行すると、ファイルが存在しないというメッセージが表示されました (略語がファイル アドレスの綴りに直接使用されていたため)。私は、このライブラリを使用するすべてのユーザーが、このライブラリの使用法を変更することしかできませんでした。相対パス全体を作成しました。 マージしても何も問題はありません。

3. マージ後は実行できますが、圧縮後は実行できません。

これは最も深刻な問題、最も深刻な問題、最も深刻な問題です。ファイルがマージされて圧縮された後、ファイルの使用時に AngularJS が異常に実行され、常にモジュールの初期化失敗、次の理由によりモジュール共通のインスタンス化に失敗しました: エラー: [$injector:unpr] 不明なプロバイダー: e 、以下に示すように。

非常に重要な点は、圧縮せずに使用できることです (デフォルトの圧縮が使用されます)。使用するとエラーが報告されます。したがって、インターネット上のいくつかの記事では、AngularJS コントローラーやディレクティブなどを次のように記述する必要があり、使用するサービスは文字列で定義されていると書かれています。

commonModule.controller( "broswerCtrl" ,["$scope" ,"$sce" , function ($scope,$sce){

しかし、私のアプリケーション全体はこのように定義されており、アプリケーションにエラーが挿入される可能性はありません。結局、変数名を混乱させずに mangle: false を設定するしかありませんでした。これを実行すると、マージおよび圧縮されたファイルが正しく使用できるようになりました。 ！ ！

追伸: 簡単に言えば、マージと圧縮はできますが、変数名を混同することはできません(いつも違和感があります)、この問題は当面解決策がないように感じます。

4. 要件をマージするときに、要件の 2 番目の層をマージすることはできません。

たとえば、main.js で次のようなモジュールをロードすると、マージ中に require の 2 番目の層がマージされていないことがわかります。

require([ "COMMON"], function(){
  require([ "angular", "LOGIN" ], function(angular){
   //....
  });
});

この時点で、findNestedDependency: true を build.js に追加する必要があります。これにより、2 番目のレイヤーがマージされます。

マージの準備

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"
})

ここではいくつかの重要な属性を示します:

baseUrl: すべてのモジュール (通常は js) はこのパスに相対的に存在します。

optimize: スクリプト ファイルを最適化する方法は次の 5 つです。

• uglify: (デフォルト) UglifyJS で圧縮されます。
  
• uglify2: UglifyJS2 (2.1.2+) で圧縮されています。
  
• closure: Google の Closure Compiler の簡易最適化モードを使用してファイルを圧縮します。最適化ツールが Java を使用する場合にのみ有効です。
  
• closure.keepLines: 改行が保持されることを除いて、closure パラメーターと同じです。
  
• none: 圧縮なし。

findNestedDependency: require と呼ばれる依存関係を検索するか、require() で定義します。

PS: 他にも多くの構成属性があるため、詳細については説明しません。ファイルが構成されたら、コマンドを実行してマージと圧縮を行います

node r.js -o build.js

概要

RequireJS モジュールのマージと圧縮は比較的簡単ですが、AngularJS に関しては圧縮にいくつかの問題があり、これより良い方法は今のところ見つかっていません。

以上がこの記事の詳しい内容です。皆様の学習のお役に立てれば幸いです。