【问题标题】:How to change Angular 10 library build structure如何更改 Angular 10 库构建结构
【发布时间】:2021-03-25 15:26:38
【问题描述】:

我正在维护一个 Angular 10 Ivy 库,我正在尝试升级它以使用辅助入口点,但我在最终构建的文件夹结构方面遇到了问题。

理想情况下,文件夹结构将模拟 @angular 的文件夹结构:

-node_modules
 |
  -- @angular
     |
     --core
     --common
     --cli
     --material
     ...

我可以导入库的片段,例如:import { someModule } from '@angular/core';

我当前的库是用一个文件夹结构构建的

-node_modules
 |
  --myLibrary
    |
     --package.json
     --dist/myLibrary
       |
        --package.json
        --public_api.ts
        --myLibrary.d.ts
        --feature1
        --feature2
        --feature3
        ...

这迫使我导入 import { feature1Module} from 'myLibrary/dist/myLibrary/feature1'; 等功能。

我知道我可以通过更新myLibrary/ng-package.json 中的dest 路径来删除第二个myLibrary 文件夹,但是我不知道如何删除dist 文件夹以使所有内容都建立在同一级别上, 因为设置 "dest": "../.." 将无法构建。

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/myLibrary",
  "assets": [
    "quill/*.scss"
  ]
}

感谢所有帮助。

更新: 项目结构是

-projects
 |
  --myLibrary
    |
     --package.json
     --ng-package.json
     --src
       |
        --public_api.ts
        --commonFunctions
     --feature1
       |
       --package.json
       --src
         |
         --public_api.ts
         --index.ts
         --feature1.component.ts
         --feature1.component.html
         --feature1.module.ts
     --feature2
     --feature3
     ...

我的projects/myLibrary/src/public_api.ts只导出commonFunctions中的功能,而每个功能文件夹中的public_api.ts文件中的每个文件都只导出各自功能的模块和组件。

【问题讨论】:

  • 功能模块1是从库公共api导出的吗?如果是这样,它可以只是像 import { featuremodule1 } from “my-library” 这样的导入吗?这类似于从某个 dist 路径导入核心 Angular 模块(如 httpclient)。
  • 不,feature1 仅通过它自己的 public_api.ts 文件导出。据我了解,如果 feature1 是从库的主要 public_api.ts 导出的,那么无论该项目是否实际使用了 feature1,都会始终将 feature1 导入到消费项目中。这会破坏使用辅助入口点的目的。
  • 在角度的情况下,每个@angular/* 是一个单独的包。如果您通过my-package/pkg1 提供多个包裹,您可能会实现该文件夹结构。不然。此外,除了在一个地方收集您自己制作的多个包之外,拥有这种结构也没有任何意义
  • @Sergey,感谢您的回复!请查看@angular/material 库。我的最终目标是允许从myLibrary/feature1 导入,类似于@angular/material 允许从@angular/material/buttons 导入。阅读 ng-packagr 中关于辅助端点的文档,这应该是可能的 (github.com/ng-packagr/ng-packagr/blob/master/docs/…)

标签: angular directory-structure angular10 angular-library


【解决方案1】:

我有类似的文件夹结构,在我的库中我有输入、按钮...等,这就是你所说的功能。在 ng-package.json 我有如下设置:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/ngx-pluto",
  "lib": {
    "entryFile": "src/index.ts",
    "cssUrl": "inline"
  }
}

在我的功能 table.module.ts 中,我可以导入 NpPaginatorModule 功能,如下所示:

import { NpPaginatorModule } from '../paginator/index';

在我使用 npm 发布我的库后,我可以在我的消费项目中导入我的功能,如下所示:

import { NpButtonModule } from 'ngx-pluto';

这是我的代码链接,仅供您参考: https://github.com/KevinZhang19870314/pluto-ui

【讨论】:

  • 嗨,Kevin,感谢您的回复,但您的图书馆只有一个入口点,很遗憾对我没有帮助。我遇到的问题是将我的库迁移到使用辅助入口点的结果,这使我的库具有可摇树的特性。在您的库中,如果使用应用程序仅使用您的“按钮”功能,它仍会导入库中的所有其他功能。这对我来说很糟糕,因为我的一些功能具有大量的 3rd 方依赖项,当它不使用该功能时,我宁愿不需要下载消费应用程序。
  • 不不,在我的库中,如果你只想使用'Button',你只需要导入NpButtonModule,不需要导入其他模块。这就是我推荐这些控件的原因。如果您有一些第 3 方依赖项,则需要将其导入您的特定功能,并且此第 3 方依赖项将在您的库的 package.json 文件中用作 bundledDependencies(如 github.com/KevinZhang19870314/pluto-ui/blob/master/projects/…)。当您使用已安装的库构建消费应用程序时,我认为只有导入的功能才会被 angular cli 捆绑。
  • 您的库实际上不是可摇树的。查看您的 public-api.ts 文件 (github.com/KevinZhang19870314/pluto-ui/blob/master/projects/…)。这会迫使您的库始终将您的所有功能提供给消耗应用程序。如果您能够使用动态导入,从技术上讲,您可以通过使它们成为可选依赖项而不将它们添加到消费应用程序来绕过大型 3rd 方依赖项,但我没有那种奢侈,因为我必须支持 IE11 和 ES5 没有动态导入.
  • 在这里,这篇文章可能比我在评论中更好地解释辅助入口点。 medium.com/tunaiku-tech/…
  • 这能解决你的问题吗?github.com/ng-packagr/ng-packagr/issues/…
【解决方案2】:

我找到了问题的答案。

我的问题是我将我的库作为 github 依赖项而不是作为 npm 包导入到我的项目中。我这样做是因为 Github 允许用户免费托管私有存储库,但 NPM 需要按月付费订阅私有包,所以我们公司的解决方法是添加我们私有库的依赖项,例如 "my-library": "git+ssh://git@github.com/myOrg/my-library.git#semver:10.2.7"。当您没有实现辅助入口点时,这实际上有效,因为您的主要入口点指向一个定义文件,该文件使用所有库功能构建并具有这些功能的适当路标。

当您尝试实现辅助入口点时,构建模块的结构会成为一个问题,因为在搜索表示辅助入口点的附加 package.json 文件时,ng-packagr 不会在模块结构中向下遍历超过一层.在阅读https://github.com/npm/npm/issues/2974 之后,npm 似乎不支持从子目录安装项目,而是只查找它在存储库中找到的第一个package.json 文件并将其安装为模块。这就是给我带来奇怪文件夹结构的原因,因为存储库实际上是一个托管 my-library、一个演示项目和一个 e2e 测试项目的单一存储库。由于没有支持单独安装其中一个项目的方法,我可能的解决方案仅限于将库分解到它自己的 Github 存储库或编写 postinstall 脚本,将 node_modules/myLibrary/dist/myLibrary 的内容复制/粘贴到node_modules/myLibrary

【讨论】:

  • 看起来 postinstall 脚本现在实际上并不适用于 windows,因为 npm 在 appdata/roaming 中运行它的 postinstall 脚本,而不是在运行 npm install 的实际项目中。遗憾的是,解决方案是托管一个私有 github 存储库,它只是库中的构建工件。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2010-09-26
  • 2021-08-17
  • 1970-01-01
  • 2023-03-24
  • 2019-12-31
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多