npm run 脚本背后的事情

JerryWang_汪子熙 - 2021-11-16 15:52:04

npm run build:mylib

npm run 执行的目标 build:mylib, 定义在 package.json 里：

实际执行的命令是：yarn --cwd feature-libs/my-lib && ng build my-lib --configuration production

ng build：把 Angular 应用编译到给定输出路径下名为 dist/ 的输出目录中。此命令必须在工作空间目录下执行。

当用于构建库时，将调用其他构建器，并且仅应用 ts-config、configuration 和 watch 选项。

使用 CLI 创建项目时，默认情况下会创建 "production" 配置，并且可以通过指定 --configuration="production" 或 --prod 选项来使用该配置。

如果遇到错误消息：

[error] Error: Unable to write a reference to UrlPipe in C:/Code/SPA/mySPA/spartacus/projects/core/src/routing/configurable-routes/url-translation/url.pipe.ts from C:/Code/SPA/mySPA/spartacus/projects/core/src/routing/configurable-routes/url-translation/url.module.ts

at ReferenceEmitter.emit (C:\Code\SPA\mySPA\spartacus\node_modules\@angular\compiler-cli\src\ngtsc\imports\src\emitter.js:85:19)

my-lib 为什么和 core 文件夹下的 url.pipe.ts 有关联？

创建一个空的 test-lib, 然后 ng build 之，看有无同样的错误。

没有任何问题。

我发现只要当我 import ICON_TYPE 之后，就会出现这个错误：

当我注释掉上图第2行代码之后，build 错误消失：

查看 Spartacus 其他 library 的 ng-package.json 文件，其 lib 区域有一个指向 @spartacus/storefront 的引用：

在新建的 test-lib service 里添加 ICON_TYPE 的引用：

也立即出错了：

经过研究发现，在 Angular 库工程文件夹下面的 tsconfig.lib.json 文件内，添加对 @Spartacus/core 和 @Spartacus/storefront 的引用即可解决问题：

成功 build 通过：

很多 JavaScript 库，比如 jQuery、Jasmine 测试库和 Angular，会通过新的特性和语法来扩展 JavaScript 环境。而 TypeScript 编译器并不能原生的识别它们。当编译器不能识别时，它就会抛出一个错误。

可以使用TypeScript 类型定义文件 —— .d.ts 文件 —— 来告诉编译器你要加载的库的类型定义。
TypeScript 敏感的编辑器借助这些定义文件来显示这些库中各个特性的类型定义。
很多库在自己的 npm 包中都包含了它们的类型定义文件，TypeScript 编译器和编辑器都能找到它们。Angular 库也是这样的。任何 Angular 应用程序的 node_modules/@angular/core/ 目录下，都包含几个 d.ts 文件，它们描述了 Angular 的各个部分。

这些 d.ts 文件如下图所示：