Angular 8：使用库构建 monorepo 应用程序的更好方法

Question

我的 Angular monorepo 项目中有几个应用程序。 我还编写了大约 5 个库以在应用程序中使用。

我想知道的是如何更好地构建/架构这些库。

ins如下：

1. 库仅供内部使用（意味着不能在其他应用程序中发布或使用，但在projects文件夹中的应用程序）
2. 库有不同的依赖，比如lodash和RxJs
3. 一个库可以在其内部导入另一个库

到目前为止我所做的：

1. 在每个库的ng-package.json指定了umdModuleIds 。
2. 指定peerDependencies像外部库lodash和RxJs
3. 设置我的应用程序的构建已经prebuild约5命令ng build lib-name通过“&&”组合
4. 我以下一种方式import { cloneDeep } from 'lodash'

现在我看到我的main.js块比将一些服务/组件/函数提取到外部库之前大得多。 现在main.js在 prod 构建上的大小是 2.1 Mb，在我看来这太大了。

另外，我不确定是否值得为每个库（UMD、FESM2015、FESM5）制作 3 个不同的版本。

我按照文档中的建议从 dist 文件夹中导入库，遵循下一个表单import { LibService } from 'lib' 。

Answer 1

Nrwl工具由 Angular 核心贡献者开发，专门研究企业架构，包括单一存储库。

Nrwl nx-examples是一个很好的入门资源。

我开始使用nx来构建一个新项目。 最后，我的项目结构如下：

platform-directory/
  |
  ---apps/
  |  |
  |  ---app1/
  |  |
  |  ---app2/
  |
  ---library1/
  |  |
  |  ---src/
  |
  ---library2/
  |  |
  |  ---src/
  |
  ---angular.json
  |
  ---package.json
  |
  ---README.md
  |
  ---tsconfig.json

配置文件

如果需要，顶级tsconfig.json应包含应用程序和库的大部分全局配置以及paths快捷方式。

路径快捷方式可以配置如下：

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "./",
    "declaration": false,
    "downlevelIteration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "module": "esnext",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es6",
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@app1*": [
        "./apps/app1/src/app*"
      ],
      "@lib1/package1": [
        "./lib1/src/package1/public_api.ts"
      ],
      "@lib1/package2": [
        "./lib1/src/package2/public_api.ts"
      ],
     ...
}

图书馆进口

在应用程序中，可以直接从库源中导入库代码，例如：

import { MyLibraryComponent } from '@lib1/package1'

由于您不发布库，因此无需构建它们。 当您在应用程序代码上运行 Angular 编译器时，库代码将根据需要自动包含和优化。

重要提示：在每个库中，不要使用路径快捷方式导入文件，因为这会导致难以调试的循环依赖。 例如，在lib2中可以使用：

import { MyLibraryComponent } from '@lib1/package1'

但是，如果在lib1中使用此导入，则会创建循环依赖项。

作为旁注，每个应用程序都有一个tsconfig.app.json和tsconfig.spec.json ，如下所示：

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "outDir": "../../dist/out-tsc/apps/app1"
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

Answer 2

特别是关于您对包大小的担忧：我怀疑 Lodash 是其中的主要罪魁祸首。 尝试使用lodash-es ，并仅从您需要的包中导入。 例如

import cloneDeep from 'lodash-es/cloneDeep';

这应该会大大减少包中的lodash数量，但它仍然不会像大多数用例那样小。 我为此专门制作了一个名为micro-dash 。 例如，它包括cloneDeep ，正如文档所说，它为您的包添加了397 bytes （大致 - 这取决于多种因素），而 lodash 版本添加了 12,289 12,289 bytes 。

不过，最终，要对过大的包进行故障排除，您应该确切地看到每个库向其中添加了多少。 这就是source-map-explorer的领域。 绝对在您的最终产品包上运行它，并首先解决最严重的违规者！