标签：浏览器 lib 创建 library Angular build ng my angular

本文使用的 Github 项目：https://github.com/wangzixi-diablo/angular-monorepo/commits/main

项目本地路径：

C:\Code\SPA\angular-monorepo

Github commit 1：https://github.com/wangzixi-diablo/angular-monorepo/commit/a9da6b7d49e48ab60b43749fb45ea750fae8a5bd

在这个 commit 里，在工作区 workspace 里创建了一个新的类型为 application 的 project：

build 时使用的工具为：@angular-devkit/build-angular:browser

ng serve 时，使用的工具为：@angular-devkit/build-angular:dev-server

创建 Angular library 的 commit：

https://github.com/wangzixi-diablo/angular-monorepo/commit/221c15d4ef68b0d75783b4b5f81547296d650abd
对于 library 来说，使用的 build 工具是 packagr：

因此，在 package.json 里自动导入了 ng-packagr 的依赖：

如何消费：

注意第五行，这里并没有直接从文件系统导入 my-lib，而是使用了其名称。

在工作区的 tsconfig.json 文件里，自动在 paths 里添加了 my-lib 到磁盘上物理文件的映射关系。这样，ng build 时，看到 my-lib 的 symbol，就会到 dist/my-lib 文件夹里查找类型定义：

library 文件夹下的 package.json，指定了入口文件为 public-api.ts:

我们在 Visual Studio Code 里查看 my-lib，鼠标 hover 上去，能看到 module "my-lib" 的提示：

按住 ctrl 再点击左键，能看到其自动定位到 dist 文件夹的 my-lib.d.ts 里：

ng build my-lib:

ng build 成功：

ng build --configuration production 成功：

dist 文件夹出现了 jerry-first-app:

最后运行成功：

这个项目里还有一些其他文件。

polyfills.ts：在 Web 开发中，polyfill 是在不支持该功能的 Web 浏览器上实现该功能的代码。 大多数情况下，它指的是实现 HTML5 或 CSS 网络标准的 JavaScript 库，或者是旧浏览器上的既定标准（某些浏览器支持），或者现有浏览器上的提议标准（任何浏览器都不支持）。 正式地说，“polyfill 是浏览器 API 的垫片”。

无论浏览器是否支持，Polyfills 允许 Web 开发人员使用 API，并且通常开销最小。 通常，他们首先检查浏览器是否支持 API，如果可用就使用它，否则使用他们自己的实现。Polyfills 本身使用其他更受支持的特性，因此不同的浏览器可能需要不同的 polyfills。 该术语也用作动词：polyfilling 为功能提供 polyfill。

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

标签：浏览器,lib,创建,library,Angular,build,ng,my,angular
来源： https://www.cnblogs.com/sap-jerry/p/15706967.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。