Angular 库包依赖

标签 angular angular-library

我已经使用 CLI 创建并捆绑了一个 Angular (7.2.0) 库:

ng g library MyLibrary

ng build MyLibrary


这给了我 my-libary.umd.js我需要的捆绑包。
目前,所有依赖项都作为 peerDependencies 添加到库 package.json 中。我想要做的是实际将一些依赖项与库 (.umd) 捆绑在一起。将它们添加为“dependencies”而不是“peerDependencies”似乎不起作用,我真的不明白有什么区别?
我怎样才能做到这一点?
应捆绑 ngx-spinner 的 package.json 示例
{
  "name": "demo-plugin",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^7.1.0",
    "@angular/core": "^7.1.0"
  },
  "dependecies": {
    "ngx-spinner": "^7.1.4"
  },
  "bundledDependencies": [
    "ngx-spinner"
  ]
}

最佳答案

你要的是把它加到bundledDependencies :
dependencies :当其他人使用您的库时,NPM 会自动安装它们。此处列出的依赖项也需要在 ng-package.json 中列入白名单(“whitelistedNonPeerDependencies”)
peerDependencies :你的库的用户必须安装依赖(将它添加到他自己的 package.json 中)
bundledDependencies :在构建它时,依赖项将与您的库捆绑在一起。这也将捆绑所有可传递的依赖项。如果你想停止这条链,你需要添加不应该捆绑到peerDependencies的依赖项。 .例如,如果您想捆绑依赖于 B 的依赖项 A,您会得到一个包含 A 和 B 的捆绑包。如果您不想捆绑 B,则将其添加到 peerDependencies 中。 .

您拥有的每个依赖项只能同时出现在其中一个中。因此,要捆绑依赖项,您需要将此依赖项添加到根目录的 package.json(而不是 library-package.json)。你不应该做的是运行 npm install库文件夹内。如果你这样做 npm install在 library 文件夹中并且根 package.json 中没有捆绑的依赖项(因此它从根 node_modules 文件夹中丢失),您会成功构建,但依赖项不会包含在构建中(cli 应该也许暗示这一点..)。

长话短说,针对您的具体问题:

  • 从 library-package.json 的“dependencies”部分删除“ngx-spinner”
  • 删除库中的 node_modules 文件夹(如果那里有)
  • 将“ngx-spinner”作为依赖项添加到您的 root-package.json
  • 构建库
  • 关于Angular 库包依赖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54782063/

    相关文章:

    angular - 将参数传递给 Angular Directive(指令)

    angular - Angular 如何处理 Angular 库中的非导入模块?

    angular - StackBlitz ngcc 无法在启用 Ivy 的 npm 库上运行

    javascript - 无法使用 angular 2 指令将带有 Selenium 的文本输入到字段中

    angular - 在 Angular 库模块中导入 SCSS 变量文件

    angular - 如何调试 angular 13 库?

    Angular 库 : configure exported members

    javascript - 数据未定义或为空时如何使用 Lodash

    angular - 在 Angular 2 中更改当前路由上的单个路由参数

    Angular2 变更检测误区 - With plunker