头图

Angular library 学习笔记

原文

Use cases for Angular libraries

Angular 库有 2 个常见用例:

  • 构建可重用的组件库以在应用程序之间共享。
  • 构建共享服务层功能 - 例如。 用于处理外部数据源(例如 API)的客户端。

虽然有很多 Angular 库非常适合项目的情况,但值得考虑您的用例是否属于这些,因为它确实引入了一些维护开销。 请记住,您始终可以将功能编写为应用程序中共享 Angular 模块的一部分,并在必要时将其提取到库中。

Creating an Angular library project

我们将创建一个 Angular 库,以及一个使用该库的演示应用程序。 我们可以使用以下命令创建这些:

ng new example-component-library --create-application=false
cd example-component-library
ng generate library example-component-library
ng generate application example-component-library-app

使用 --create-application=false 标志可以防止 Angular 创建名为“example-component-library”的应用程序,这是我们想要给库本身而不是测试应用程序的名称。

如果我们现在查看刚刚创建的工作区内部,我们可以看到有一个项目文件夹,其中包含每个库(example-component-library)和应用程序(example-component-library-app)的子文件夹 我们刚刚生成的。 还有一个包含 e2e 测试项目的第三个文件夹,我们可以忽略它。

使用下面的命令行单独 build library:

ng build --project=example-component-library

如果我们查看 dist 文件夹,我们将看到我们的库已经构建,并且在 build 文件夹中,我们有许多不同的文件夹,其中包含适用于不同消费者的各种不同模块格式的应用程序,以及一个包含 TypeScript 定义。

  • bundles - UMD 模块格式。
  • esm5 - 主要使用 es5 的模块格式,但也使用来自 es6 的导入/导出语法。
  • esm2015 - 使用 es2015/es6 的模块格式。
  • fesm5 - esm5 的扁平化版本。
  • fesm2015 -peerDependencies esm2015 的扁平化版本。
  • lib - 库的 TypeScript 定义。

这种格式称为 Angular Package Format,它是用作 ng-packagr 输出的格式,ng-packagr 是 Angular CLI 用来编译库的工具。

库文件的项目结构:

首先,删除现有的 example-component-library 模块、组件和服务文件——我们不需要这些。

接下来我们将添加一个组件、一个管道和一个指令。 我们将遵循一种为每个模块添加一个组件的模式——这将允许消费应用程序仅导入它感兴趣的库模块,然后在构建过程中对所有其他模块进行 tree shaken. 我强烈建议这样做,因为随着库的增长,它确实会对应用程序包的大小产生影响。

  • ng generate module components/foo
  • ng generate component components/foo
  • ng generate module pipes/bar
  • ng generate pipe pipes/bar/bar
  • ng generate module directives/baz
  • ng generate directive directives/baz/baz

现在的项目结构:

最佳实践:

每个模块有一个组件,以允许对未使用的模块/组件进行 tree shake 优化。

例外情况是始终一起使用的组件应保存在同一模块中 - 例如。 如果您正在实现选项卡,则 TabGroupComponent 和 TabItemComponent 将位于同一模块中。

接下来,我们必须将我们创建的每个组件添加到其模块的导出中:

我们现在更新 public_api.ts 以导出库中我们希望公开给消费应用程序的任何文件:

现在我们要做的就是重新构建,它就可以从应用程序中使用库了。

Consuming our Angular library

开发环境

在开发过程中,使用我们库的最佳方式是使用 npm link。 这将允许我们从消费应用程序的节点模块文件夹中的目录符号链接到库的 dist 文件夹中的已编译应用程序。

cd dist/example-component-library
npm link

我们可以从本地机器上的任何地方将一个 Angular 项目链接到这个库。 从项目根文件夹:

npm link example-component-library

如果我们现在使用 watch 标志运行库,同时在另一个终端窗口中运行 ng serve。

ng build --project=example-component-library
ng serve

这将允许我们同时开发应用程序和(一个或多个)链接库,并看到应用程序在每次修改库源代码时重新编译。

生产环境

对于生产环境,我们将我们的库发布到 npm,然后使用 npm install 将其安装到应用程序中。

首先,您需要创建一个 npm 帐户。 现在从命令行登录:

npm login

From the project root folder:

cd dist/example-component-library
npm publish

我们的包现在发布在 npm(公开)上,我们可以通过将它添加到我们的应用程序的 package.json 依赖项并运行 npm install 来安装它:

"dependencies": {
    ...
    "example-component-library": "~0.0.1"
}

更多Jerry的原创文章,尽在:"汪子熙":


Jerry Wang的SAP技术专栏
SAP成都研究院开发专家,SAP社区导师,SAP中国技术大使
868 声望
1.6k 粉丝
0 条评论
推荐阅读
SAP OData 开发实战教程:从入门到提高
本教程根据笔者在 SAP 研究院工作多年的实战经验,计划通过 300 篇以上的文章篇幅,深入介绍 SAP 三大主流的 OData 开发技术:

JerryWang_汪子熙阅读 70

封面图
JS 函数式概念: 管道 和 组合
微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。本文 GitHub [链接] 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

前端小智7阅读 644

Vue3 + Vite2 + TypeScript + Pinia(Vuex)+JSX 搭建企业级开发脚手架【开箱即用】
随着Vue3的普及,已经有越来越多的项目开始使用Vue3。为了快速进入开发状态,在这里向大家推荐一套开箱即用的企业级开发脚手架,框架使用:Vue3 + Vite2 + TypeScript + JSX + Pinia(Vuex) + Antd。废话不多话,...

阳晨@11阅读 3.1k

封面图
快速构建页面结构的 3D Visualization
可以通过 控制台 --> 右边的三个小点 --> More Tools --> Layers 打开。即可以看到页面的一个 3D 层级关系,像是这样:

chokcoco6阅读 1.6k

前端性能优化到底该怎么做(上)— 开门见山
前端性能优化 又是个听起来很高大上的词,确实是的,因为它需要 高在性能,大在范围,所幸很多大佬都已经输出了很多高质量的内容供大家参考,作者最近也在学习和了解这方面的内容,对如下文中的一些理解若有不当...

熊的猫10阅读 2.1k

封面图
表格集算表高性能原理——怎样实现纯前端百万行数据秒级响应
集算表 (Table Sheet)是一个具备高性能渲染、数据绑定功能、公式计算能力的数据表格,通过全新构建的关系型数据管理器结合结构化公式,在高性能表格的基础上提供排序、筛选、样式、行列冻结、自动更新、单元格...

葡萄城技术团队4阅读 15.2k

8个酷炫的GitHub技巧,让你看起来像大佬一样!
微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。本文 GitHub [链接] 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

前端小智8阅读 581

868 声望
1.6k 粉丝
宣传栏