我使用 Angular 和 Angular CLI/ng-packagr 创建了一个简单的组件库。我能够在其他 Angular 应用程序中构建、打包、分发和安装这个组件库。但是我还有一个问题。我的组件库使用 Roboto 和 Material Design 图标,我在组件库中列出了这些package.json
,两个包都在我的peerDependencies
和中列出devDependencies
。这看起来像这样(为了便于阅读,我没有在我的 中包含所有包devDependencies
)
"peerDependencies": {
"@angular/animations": "~7.0.0",
"@angular/common": "~7.0.0",
"@angular/compiler": "~7.0.0",
"@angular/core": "~7.0.0",
"@angular/forms": "~7.0.0",
"@angular/http": "~7.0.0",
"@angular/platform-browser": "~7.0.0",
"@angular/platform-browser-dynamic": "~7.0.0",
"@angular/router": "~7.0.0",
"material-design-icons": "^3.0.1",
"roboto-fontface": "^0.10.0",
"rxjs": "~6.3.3",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.1102.12",
"@angular-eslint/builder": "1.2.0",
"@angular-eslint/eslint-plugin": "1.2.0",
"@angular-eslint/eslint-plugin-template": "1.2.0",
"@angular-eslint/schematics": "1.2.0",
"@angular-eslint/template-parser": "1.2.0",
"@angular/animations": "^11.2.13",
"@angular/cli": "^11.2.12",
"@angular/common": "^11.2.13",
"@angular/compiler": "^11.2.13",
"@angular/compiler-cli": "^11.2.13",
"@angular/core": "^11.2.13", // lots more angular stuff then...
"ng-packagr": "^11.2.4",,
"material-design-icons": "^3.0.1",
"roboto-fontface": "^0.10.0",
},
"dependencies": {}
将组件库安装到新应用程序时,我使用 npm 安装包,然后将 Roboto 和 Material Design CSS 文件路径传输到新应用程序的 angular.json 文件中的样式属性中。可悲的是,这给出了一个错误:
发生未处理的异常:ENOENT:没有这样的文件或目录,lstat '/Users/user/demo/demo-app/node_modules/material-design-icons
这是因为在安装我的包(组件库)时没有安装第 3 方包。我读到 Node 不再支持安装peerDependencies
. 我或任何使用我的库的人都必须手动将它们导入到他们的应用程序中。这不是很好,我可以看到人们忘记这样做或不知道他们必须这样做。然后,我阅读whitelistedNonPeerDependencies
并阅读到将其包含在我的组件库的 package.json 中将确保安装所需的包,但这可能会导致包重复。我对这些东西很陌生,有人可以告诉我一个合适的或最佳实践,以确保在将我的组件库安装到新应用程序时安装我的组件库的 3rd 方包依赖项。
非常感谢 - 如果我对这个问题的措辞很糟糕,请添加评论,我会重构。