angular - 警告 : No name was provided for external module 'X' in output. 全局变量 - 猜测 'X'

Question

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'

当我尝试将我的库捆绑到通用模块定义时收到此消息。可以通过在 ng-package.json 中添加 umdModuleIds 来修复警告。

documentation给我们以下解释:

When writing the UMD bundle, ng-packagr does its best to provide common default values for the UMD module identifiers. Also, rollup will do its best to guess the module ID of an external dependency. Even then, you should make sure that the UMD module identifiers of the external dependencies are correct. In case ng-packagr doesn't provide a default and rollup is unable to guess the correct identifier, you should explicitly provide the module identifier by using umdModuleIds in the library's package file section like so: ...

umdModuleIds :

A map of external dependencies and their correspondent UMD module identifiers. Map keys are TypeScript / EcmaScript module identifiers. Map values are UMD module ids. The purpose of this map is to correctly bundle an UMD module file (with rollup). By default, rxjs, tslib and @angular/* dependency symbols are supported.

如何查找或检查必须添加到 umdModuleIds 的时刻、odata-parser 或任何其他模块的 UMD ID 的正确性？

Answer 1

我发现文档也很难理解。 ng-packagr umdModuleIds设置 ng-package.json是导入名称到 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"
      ...
    }