22ndtech-common-lib 中文文档教程

Question

Warning

此快速入门正在积极开发中，尚未达到最终形式。

它可能与当前版本的 Angular 不完全兼容。

22ndtech Common Lib

这是一个简单的库，它定义了 22ndtech 开发工作的通用函数和数据结构，实现了 角度包格式 v4.0。

特点：

• a simple example library
• unit tests for the library
• a demo application that consumes the library in JIT mode and runs in watch mode
• an integration app that consumes the library in JIT and AOT mode and runs e2e tests

常见任务作为 npm 脚本存在：

• npm start to run a live-reload server with the demo app
• npm run test to test in watch mode, or npm run test:once to only run once
• npm run build to build the library
• npm run lint to lint
• npm run clean to clean
• npm run integration to run the integration e2e tests
• npm install ./relative/path/to/lib after npm run build to test locally in another app

如果您需要调试集成应用程序，请检查 ./integration/README.md。

The 22ndtech Common Library

这个库实现

了警告：只在开始时这样做以避免意外删除你自己的 git 设置！

What's in the 22ndtech Common Lib?

来源/ ├── 演示/ | └── 应用/ | ├── app.component.ts | └── app.module.ts └── 库/ ├── index.ts └── 源码/ ├── 组件/ | └── lib.component.ts ├── 服务/ | └── lib.service.ts └── module.ts

```

每个文件都有不同的用途，并随着应用程序的增长而独立发展。

src/ 之外的文件涉及构建、部署和测试您的应用程序。 它们包括配置文件和外部依赖项。

src/lib/ 中的文件“属于”您的库，而 src/demo/ 包含一个演示应用程序 加载您的图书馆。

库不会自行运行，因此在开发时拥有此“演示”应用程序非常有用 了解您的图书馆对消费者的看法。

当您运行 npm start 时，将提供演示应用程序。

以下都在 src/

File	Purpose
demo/app/app.component.ts	A demo component that renders the library component and a value from the library service.
demo/app/app.module.ts	A demo NgModule that imports the Library LibModule.
lib/src/component/app.component.ts	A sample library component that renders an h2 tag.
lib/src/service/lib.service.ts	A sample library service that exports a value.
lib/src/module.ts	The library's main NgModule, LibModule.
lib/index.ts	The public API of your library, where you choose what to export to consumers.

The build step

中，你可以通过运行 npm run build 来构建库。 这将生成一个包含上述所有入口点的 dist/ 目录。

创建构建的所有逻辑都可以在 ./build.js 中找到。 它由大约 5 个步骤组成：

• Compile with the AOT Compiler (AOT compiler or ngc) for ES5 and ES2015.
• Inline html and css inside the generated JavaScript files.
• Copy typings, metatada, html and css.
• Create each bundle using Rollup.
• Copy LICENSE, package.json and README.md files

Testing libraries

虽然测试始终很重要，但它在图书馆中尤其重要，因为消费者 应用程序可能会由于库中的错误而中断。

但库被另一个应用程序使用的事实也使得它难以测试。

要正确测试库，您需要进行集成测试。 集成测试之于库就像端到端测试之于应用程序。 它测试应用程序如何安装和使用您的库。

22ndtech Common lib 包含一个名为 integration 的目录，其中包含一个独立的 在 AOT 和 JIT 模式下使用您构建的库的应用程序，通过端到端测试来验证 有用。

要运行集成测试，请执行 npm run integration，它会执行以下操作：

• Build your library.
• Enter the integration app's directory.
• Install dependencies.
• Build the app in AOT mode.
• Test the app in AOT mode.
• Test the app in JIT mode.

运行集成测试让您更加确信您的库已正确构建。

除了集成测试，您还可以通过 npm run test 以监视模式运行单元测试， 或通过 npm run test:once 单次运行。

您还可以通过将库安装在您拥有的另一个本地存储库中来测试该库。 为此，首先通过 npm run build 构建您的库。 然后使用 dist 文件夹的相对路径从您的其他存储库安装它： npm install relative/path/to/library/dist。

Appendix: Supporting AOT

AOT 在优化 Angular 应用程序方面发挥着重要作用。 因此，第三方库以与 AOT 兼容的格式发布非常重要 汇编。 否则，将无法将库包含在 AOT 编译的应用程序中。

只有使用 TypeScript 编写的代码才能进行 AOT 编译。

在发布库之前，必须先使用 AOT 编译器 (ngc) 进行编译。 ngc 通过添加扩展来扩展 tsc 编译器以支持 AOT 编译 常规的 TypeScript 编译。

AOT 编译输出三个文件，必须包含这些文件才能与 AOT 兼容。

Transpiled JavaScript

像往常一样，原始 TypeScript 被转译为常规 JavaScript。

类型文件

JavaScript 无法表示类型。 为了保留原始类型，ngc 将生成.d.ts 类型文件。

元数据 JSON 文件

ngc 为每个 Component 和 NgModule 输出一个 metadata.json 文件。 这些元数据文件代表了原始 NgModule 和 Component 中的信息 装饰器。

元数据可能引用外部模板或 css 文件。 这些外部文件必须包含在库中。

NgFactories

ngc 生成一系列带有 .ngfactory 后缀的文件。 这些文件代表 AOT 编译源，但不应包含在已发布的库中。

相反，消费应用程序中的 ngc 编译器将生成基于 .ngfactory 的文件 在库附带的 JavaScript、类型和元数据上。