关于前端:如何创建-Angular-library-并在生产环境中消费

38次阅读

共计 1175 个字符,预计需要花费 3 分钟才能阅读完成。

本文应用的 Github 我的项目:https://github.com/wangzixi-d…

我的项目本地门路:

C:\Code\SPA\angular-monorepo

Github commit 1:https://github.com/wangzixi-d…

在这个 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-d…
对于 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 的原创文章,尽在:” 汪子熙 ”:

正文完
 0