乐趣区

关于angular:Angular-library-学习笔记

jiezi

原文

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 的原创文章，尽在：” 汪子熙 ”:

退出移动版