美文网首页收藏
npm run 脚本背后的事情

npm run 脚本背后的事情

作者: 华山令狐冲 | 来源:发表于2021-12-13 10:39 被阅读0次

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 文件如下图所示:

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


相关文章

  • npm run 脚本背后的事情

    npm run build:mylib npm run 执行的目标 build:mylib, 定义在 packag...

  • npm配置文件脚本定义.md

    [TOC] 一、npm脚本原理 npm脚本的原理非常简单。每当执行npm run,就会自动新建一个Shell,在这...

  • npm脚本命令npm run script的使用

    npm脚本命令npm run script的使用 转自:https://www.cnblogs.com/zhaoz...

  • 使用npm scripts构建前端工作流

    npm原理 npm 脚本的原理非常简单。每当执行npm run,就会自动新建一个 Shell,在这个 Shell ...

  • vue-loader源码解读

    调试 新增script调试脚本 npm run debug后打开chrome://inspect/,即可看...

  • React获取环境变量

    -获取内置环境变量 1、首先,运行脚本npm run eject把webpack配置解封出来注意:谨慎使用npm ...

  • npm script

    npm 脚本的原理非常简单。每当执行npm run,就会自动新建一个 Shell,在这个 Shell 里面执行指定...

  • 关于npm run dev和build

    npm run XXX是执行配置在package.json中的脚本,比如: 只有这里配置了,你才能run,所以不是...

  • 前端项目中npm脚本命令

    npm原理 每当执行npm run,就会自动新建一个 Shell,在这个 Shell 里面执行指定的脚本命令。因此...

  • better-npm-run优化npm脚本

    betterScripts脚本定义可以是具有command和env属性的字符串或子对象。env块中定义的值将覆盖先...

网友评论

    本文标题:npm run 脚本背后的事情

    本文链接:https://www.haomeiwen.com/subject/lexnzltx.html