Angular库bundle的本地依赖

Question

我有两个库:core和client。

Core是私有的，client是要发布的。我想要在客户端包中包含core(客户端使用核心功能)，因此最终用户不需要管理核心依赖。

我该怎么做?如有任何帮助，不胜感激。

<标题>包

packages
├── client
│   ├── ng-package.json
│   ├── node_modules
│   │   └── @lib
│   │       └── core -> ../../../core
│   ├── package-lock.json
│   ├── package.json
│   └── src
│       ├── lib
│       │   ├── client.ts
│       └── public-api.ts
└── core
├── ng-package.json
├── package-lock.json
├── package.json
└── src
├── lib
│   ├── core.ts
└── public-api.ts

如你所见，有一个符号in从packages/client/node_modules/@lib-core指向核心。这使得当我在local中运行应用程序时环境中它找到对核心的引用。问题是生成构建后，没有链接。

核心/package.json

{
"dependencies": { "tslib": "^1.10.0" },
"main": "src/public-api.ts",
"name": "@lib/core",
"scripts": {
"build": "ng build core",
"test": "ng test core"
},
"version": "0.0.1"
}

核心/ng-package.json

{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/core",
"lib": {
"entryFile": "src/public-api.ts"
}
}

客户端/package.json

{
"bundledDependencies": ["@lib/core"],
"dependencies": {
"@lib/core": "^0.0.1",
"tslib": "^1.10.0"
},
"main": "src/public-api.ts",
"name": "@lib/client",
"scripts": {
"build": "ng build client",
"test": "ng test client"
},
"version": "0.0.1"
}

客户端/ng-package.json

{
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
"dest": "../../dist/client",
"lib": {
"entryFile": "src/public-api.ts",
"umdModuleIds": {
"@lib/core": "@lib/core"
}
},
"whitelistedNonPeerDependencies": ["@lib/core"]
}

如你所见，我在client/package.json中使用了npmbundledDependencies，正如这里提到的。这在package/client内运行npm pack时有效，但我想先用Angular构建(因此它生成javascript代码并应用性能技术)。我的意图是在生成构建后打包。

<标题>dist h1> 成包后，我尝试在dist/client中运行npm install，看看是否可以从那里安装和打包依赖项。

抛出错误404 Not Found '@lib/core@^0.0.1' is not in the npm registry.

这是dist/client构建后的树:

client
├── README.md
├── bundles
│   ├── lib-client.umd.js
│   ├── lib-client.umd.js.map
│   ├── lib-client.umd.min.js
│   └── lib-client.umd.min.js.map
├── esm2015
│   └── ...
├── esm5
│   └── ...
├── fesm2015
│   └── ...
├── fesm5
│   └── ...
├── lib
│   └── client.d.ts
├── lib-client.d.ts
├── package.json
└── public-api.d.ts

dist/client/package.json具有相同的包内定义的依赖

"bundledDependencies": [
"@lib/core"
],
"dependencies": {
"@lib/core": "^0.0.1",
"tslib": "^1.10.0"
},

这是bundles/lib-client.umd.js文件中的导入:

(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('tslib'), require('@lib/core')) :
typeof define === 'function' && define.amd ? define('@lib/client', ['exports', 'tslib', '@lib/core'], factory) :
(global = global || self, factory((global['lib'] = global['lib'] || {}, global['lib']['client'] = {}), global.tslib, global['@lib/core']));
}(this, (function (exports, tslib, core) { 'use strict';

看起来，不是复制核心代码，而是将其作为外部依赖项引用。

<标题>回顾h1> 。与库捆绑到用户。

---

关于如何在ci中测试这一点，我还有另一个问题:

Answer 1

您可以尝试以下配置:

在tsconfig.ts中搜索dist包:

"paths": {
"@angular/*": ["./node_modules/@angular/*"],
"@lib/core": [
"../../../core/dist/@lib/core" 
]
}

仍然在tsconfig.ts(配置到没有错误):

"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true,
"enableIvy": true,
"importHelpers": true
}

在angular.json中搜索preserveSymlinks配置:

projects.<project-name>.architect.build.options.preserveSymlinks: true

添加步骤:从客户端package.json中删除核心库依赖。你不需要它:

"bundledDependencies": [
...
],
"dependencies": {
...
},

你可以导入核心库的所有函数:

import {...} from '@lib/core';

，当你在客户端库上运行ng build时，它们将捆绑在一起。

这个设置对我有效，对于你的用例。

Answer 2

由于您的核心是私有的，并且客户端有直接依赖，因此您不需要将其视为本地包。直接使用相对路径访问核心模块。

即)从包中移除依赖。使用客户端包中的相对路径直接导入核心文件。

,

步骤1:从client package.json中移除核心依赖

客户端/package.json

{
"bundledDependencies": ["@lib/core"],
"dependencies": {
"tslib": "^1.10.0"
},
"main": "src/public-api.ts",
"name": "@lib/client",
"scripts": {
"build": "ng build client",
"test": "ng test client"
},
"version": "0.0.1"
}

步骤2:使用相对路径或别名(使用@)导入core

在客户端导入core。

包/客户/src/lib/client.ts

import core from "@lib/core">