npm run 脚本背后的事情

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 脚本背后的事情相关推荐

解读 vue-cli 脚手架（一）：npm run dev的背后
揭秘 vue-cli 脚手架前言:记得自己大二(2016年)的时候,经过同学的介绍,偶然间接触到了 vue 的项目.那时候的自己对于这一项新兴的技术掌握程度并不好,一来二去折腾了一个星期,也没有弄明 ...
webpack自动化构建脚本指令npm run dev/build
指令为不同环境配置可执行指令,我们使用npm scripts方式,在package.json文件中配置执行指令: {"scripts": {"start": ...
npm构建脚本_NPM脚本简介
npm构建脚本 by Mohammed Ajmal Siddiqui 由Mohammed Ajmal Siddiqui NPM脚本简介 (Introduction to NPM Scripts) NP ...
npm run buil构建后页面白屏_从Npm Script到Webpack，6种常见的前端构建工具对比
从Npm Script到Webpack,6种常见的前端构建工具对比小编说:历史上先后出现了一系列构建工具,它们各有优缺点.由于前端工程师很熟悉JavaScript,Node.js又可以胜任所有构建需 ...
npm run build，start
npm run build,start 是在package.json 文件中定义的 scripts脚本中 "scripts": {"dev": "no ...
vue项目工程中npm run dev 到底做了什么
npm install 安装了webpack框架中package.json中所需要的依赖 2.安装完成之后,需要启动整个项目运行,npm run 其实执行了package.json中的script脚本 ...
npm run dev/build/serve
npm run dev/build/serve 1.ERR引发的思考 npm run dev npm ERR! missing script: devnpm ERR! A complete log o ...
下找到vue变量_Vue：npm run serve 到底做了什么？
前言在 vue-cli2或者 vue-cli3 中,当我们创建好一个项目,我们要通过 npm run dev(vue-cli2的命令,vue-cli3之后用npm run serve,原理都一样,只 ...
npm run dev报错_React + TypeScript 从零开发Popup组件并发布到 npm
上篇文章中介绍了如何从 0 到 1 搭建一个 React 组件库架子,但为了一两个组件去搭建组件库未免显得大材小用. 这次以移动端常见的一个组件 Popup 为例,以最方便快捷的形式发布一个流程完整的 ...

npm run 脚本背后的事情

npm run 脚本背后的事情相关推荐

最新文章

热门文章