Require.jsが連結JSファイル内のモジュールを認識できません

Question

パフォーマンス向上のためにAngularJSベースのWebアプリケーションにRequire.jsを統合しています。 index.htmlをで 私はインポートしたrequire.conf：私が構築したライブラリである、ここで

require.config({ 
      paths: { 
        'jquery': '...', 
        'Angular': '...', 
        .... 
        'libs' : 'src/libs.js' 
      }, 
      shim: { 
        'Angular': { exports: 'Angular'}, 
        'libs' : ['Angular'] 
        .... 
      } 
    } 

    require(
     [ 
       'jquery', 
       'angular', 
       'app', 
       'libs', 

      ], function (jquery, angular) { 
      angular.bootstrap(['app']) 
     } 
    ); 

libs.js：ここ

<script src="bower_components/requirejs/require.js" data-main="require-conf.js"> 

が必要-conf.jsのコードスニペットですウェブパック。いくつかのプラグインとライブラリがこのファイルに連結されています。 libs.jsをビルドするためのwebpack設定コードスニペットがあります。 webpack.config.js

plugins: [ 
    new ConcatPlugin({ 
     fileName: 'libs.js', 
     filesToConcat: [ 
     './src/utils/bootstrap-plugins.min.js', 
     './src/libs/angular-bootstrap-datetimepicker/datetimepicker.js', 
     './src/libs/angular-bootstrap-datetimepicker/datetimepicker.templates.js', 
     './src/libs/angular-fusioncharts/fusioncharts.js', 
     './src/libs/angular-fusioncharts/angular-fusioncharts.min.js', 
     './src/libs/angular-fusioncharts/types/fusioncharts.charts.js', 
     './src/libs/angular-ui-tour/angular-ui-tour.js', 
     './src/libs/JQ_CONFIG/flot/jquery.flot.js', 
     './src/libs/JQ_CONFIG/flot/jquery.flot.pie.js', 
     './src/libs/JQ_CONFIG/flot/jquery.flot.resize.js', 
     './src/libs/JQ_CONFIG/flot-spline/js/jquery.flot.spline.min.js', 
     './src/libs/JQ_CONFIG/flot.orderbars/js/jquery.flot.orderBars.js', 
     './src/libs/JQ_CONFIG/flot.tooltip/js/jquery.flot.tooltip.min.js', 
     './src/libs/JQ_CONFIG/footable/dist/footable.all.min.js', 
     './src/libs/JQ_CONFIG/html5sortable/jquery.sortable.js', 
     './src/libs/jquery-ui-draggable/jquery-ui-draggable.min.js', 
     './src/libs/ng-table/ng-table.js', 
     './src/libs/StickyTableHeaders/jquery.stickytableheaders.js', 
     './src/libs/ng-quill/quill.js', 
     './src/libs/ng-quill/ng-quill.js', 
     ].map(function(fileName) { 
     return path.resolve(__dirname, fileName); 
     }), 

で

しかし、アプリケーションはlibs.js内部のモジュールを認識することはできません。

モジュール 'ngquill' は使用できません！モジュール のスペルが間違っているか、またはロードするのを忘れています。モジュールを登録する場合は、 が第2引数として依存関係を指定していることを確認してください。

Require.jsはwebpackによって連結されたモジュールを認識できません。この問題を解決するソリューションはありますか？

Answer 1

AMDモジュールを1つのファイルに連結するだけで、1つのファイルに組み合わせることはできません。複数のモジュールを1つのファイルにまとめると、モジュールはハードコードされた名前を取得する必要があります。あなたは、単一のファイルに単一のモジュールを持っている場合は、defineそれができるために：

define([ ... deps ... ], function (...) { 

この場合、RequireJSは、それが要求されたときの名前から、モジュールの名前を推測します。あなたは、単一のファイルに複数のモジュールを組み合わせると

、define呼び出しは形式である必要があります。defineへ

define("foo", [ ... deps ...], function (...) { 

define("bar", [ ... deps ...], function (...) { 

// etc. 

最初の引数が定義されているモジュールRequireJSを伝える文字列です。これは、RequireJSがどのモジュールがどのモジュールであるかを知らないために必要です。このため、連結することはできません。

あなたは、ほとんどの場合、私は上述のように、両方のがファイルを変換することができWebPACKの構成を書き、それらを連結できます。しかし、それはハードルに満ちている。たとえば、ランタイムshimの設定では、ビルド時に特別な処理が必要です。最後に、RequireJS 'optimizerの機能を複製することになります。ホイールを再設計するのではなく、RequireJSのオプティマイザを使用することをお勧めします。