web-dev-qa-db-ja.com

警告：output.globalsで外部モジュール「X」の名前が指定されていません-推測「X」

WARNING: No name was provided for external module 'moment' in output.globals – guessing 'momentImported'
WARNING: No name was provided for external module 'odata-parser' in output.globals – guessing 'parser'

ライブラリをUniversal Module Definitionにバンドルしようとすると、このメッセージが表示されます。この警告は、ng-package.jsonにumdModuleIdsを追加することで修正できます。

documentation は次の説明を提供します。

UMDバンドルを作成するとき、ng-packagrはUMDモジュール識別子に共通のデフォルト値を提供するために最善を尽くします。また、ロールアップは、外部依存関係のモジュールIDを推測するために最善を尽くします。それでも外部依存関係のUMDモジュール識別子が正しいことを確認する必要があります。 ng-packagrがデフォルトを提供せず、ロールアップが正しい識別子を推測できない場合、ライブラリーのパッケージファイルセクションで次のようにumdModuleIdsを使用して、モジュール識別子を明示的に提供する必要があります。..

umdModuleIds：

外部依存関係と対応するUMDモジュール識別子のマップ。マップキーはTypeScript/EcmaScriptモジュールの識別子です。マップ値はUMDモジュールIDです。このマップの目的は、UMDモジュールファイルを正しくバンドルすることです（rollupを使用）。デフォルトでは、rxjs、tslibおよび@angular/*依存関係記号がサポートされています。

モーメントのUMD ID、odata-parser、またはumdModuleIdsに追加する必要があるその他のモジュールを見つけたり、正確性を確認するにはどうすればよいですか？

angularrollupjsng-packagrumd
1
ROMAN

私もドキュメントを理解するのが難しいと感じました。 ng-package.jsonのng-packagr umdModuleIds設定は、UMDがjavascript globalオブジェクトに登録するモジュールIDへのインポート名のマッピングです。

つまり、TypeScriptコードでは、次のように名前をインポートします。

import * as moment from 'moment';

文字列momentはumdModuleIdsの下のキーである必要があります。

この値は、パッケージのUMDバンドルに登録されているグローバル変数と一致する必要があります。インポートするJSファイルを確認すると、global.X値が設定されていることがわかります。 moment.js の場合、コードブロックは次のとおりです。

//! moment.js

;(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
    typeof define === 'function' && define.AMD ? define(factory) :
    global.moment = factory()
}(this, (function () { 'use strict';

行global.moment = ...は、必要なものを提供します。そのため、モーメントを正しくインポートするには、ng-package.jsonに以下を含める必要があります。

  "lib": {
    "entryFile": "src/public-api.ts",
    "umdModuleIds": {
      "moment": "moment"
    }
  }

この場合、ng-packagrの推測は正しいことがわかります-インポート名はUMDグローバル変数と一致しますが、ng-packagrが確実に知るには、明示的に指定する必要があります。

これをNPM依存関係に対して修正できる別の（そしてより良い）方法があるはずです。これは、ライブラリpackage.jsonファイル（ng.package.jsonと同じディレクトリにあるpackage.json）にライブラリの依存関係を追加することです。ファイル）。私は最初にそれを試します-依存関係がpackage.jsonに含まれている場合、ng-packagrはUMDモジュールIDを正しく検出すると思います。

ただし、ローカルライブラリ（同じangularワークスペース内のライブラリ）、またはng-packagrで分析できないライブラリを使用している場合は、 UMD IDと一致することを確認してください。たとえば、内部ライブラリに@mycompany/utilなどのスコープ付き/名前空間付きの名前を使用している場合、UMDモジュールIDが次のように登録されていることがわかります。

File: ~/dist/util/bundles/mycompany-util.umd.js

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.AMD ? define('@mycompany/util', ['exports'], factory) :
    (global = global || self, factory((global.mycompany = global.mycompany || {}, global.mycompany.util = {})));
}(this, (function (exports) { 'use strict';

したがって、global.mycompany.util =という行を指定すると、次のようなUMDモジュールIDを指定する必要があります。

    "umdModuleIds": {
      "@mycompany/util": "mycompany.util"
      ...
    }
2
crimbo