使用AngularCLI快速开发一个Library

过程如下:

1. 使用 Angular CLI 创建 Lib库 的骨架
2. 开发 Lib库
3. 打包 Lib库 的资源文件和全局样式文件
4. 测试并使用 Lib库

关键字说明:

• Lib库: 我们要开发的Angular Library库
• 宿主工程: 用来调试Lib库的工程, 本文中的my-app就是我们的宿主工程, my-lib是我们要开发的Lib库

---

第一步: 使用 Angular CLI，用以下命令生成一个新库的骨架

ng new my-app --skip-install --style=scss --routing=false
cd my-app
ng generate library my-lib
npm install

• 此时项目的结构如下图:

Lib库的骨架

第二步: 开发Lib库

• 宿主工程中的projects/my-lib目录下, 是我们要开发的Lib库
• Lib库的内容, 不是本文的重点, 但是为了功能的完整, 我们需要加入assets和theme两个文件夹, 其中分别放入资源文件和全局样式文件, 之后, 在build的时候会将它们一并打包

开发Lib库

• 需要注意的是ng-package.json文件, 其中lib.entryFile指定Lib库的入口文件, 也就是public-api.ts文件

ng-package.json

• 另外, Lib库中的package.json与宿主工程中的package.json没有任何关系

第三步: 打包Lib库并在宿主工程中使用

• 假设你的Lib库的核心代码已经写好, 我们开始打包
• 在宿主工程的package.json的scripts中加入以下几个命令:

"scripts": {
 ...
 // 1. 编译Lib库
 // 说明: my-lib是你的Lib库的名字
 // 编译的结果会放到dist/my-lib目录下(在ng-package.json文件中配置)
 "build_lib": "ng build my-lib",
 // 2. 将编译之后的Lib库打包
 // 说明: `npm pack`会将你编译之后的代码打包成.tgz文件
 "npm_pack": "cd dist/my-lib && npm pack",
 // 3. 在宿主工程中安装刚刚打包好的Lib库
 // 说明: 宿主工程作为测试用的工程, 本地安装刚打包好的Lib库即可
 "npm_install": "npm i ./dist/my-lib/my-lib-0.0.1.tgz",

 // 整合之后的命令: 最终只需要执行这一个命令即可
 // 说明: 每次Lib库有修改, 都需要重新执行这个命令
 "package": "npm run build_lib && npm run npm_pack && npm run npm_install"
 ...
}

• 在宿主工程的根目录下执行npm run package, 此时会打包Lib库, 并安装到宿主工程中
• 在宿主工程的app.module.ts中引入Lib库, 并在app.component.html中使用
  
  使用Lib库
• 现在在宿主工程中执行ng serve -o 启动程序, 你应该可以看到页面正常显示.
  但是 ~~~ 引入图片和全局样式 ~~~ 失败

现在的打包结果

期待的结果

第四步: 打包资源文件和全局样式文件

• 宿主工程的package.json中的scripts修改如下:

"scripts": {
  ...
  // 1.编译Lib库
  "build_lib": "ng build my-lib",
  // 2.将编译之后的Lib库打包
  "npm_pack": "cd dist/my-lib && npm pack",
  // 3. 在宿主工程中安装刚刚打包好的Lib库
  "npm_install": "npm i ./dist/my-lib/my-lib-0.0.1.tgz",

  // 4.copy assets
  // 说明: 将assets目录从Lib库中copy到dist/my-lib中
  "copy_assets": "cp -rf projects/my-lib/src/assets dist/my-lib/assets",
  // 5.copy theme
  // 说明: 将theme目录从Lib库中copy到dist/my-lib中
  "copy_theme": "cp -rf projects/my-lib/src/theme dist/my-lib/theme",

  // 整合之后的命令
  "package": "npm run build_lib && npm run copy_assets && npm run copy_theme && npm run npm_pack && npm run npm_install"
  ...
}

• 再次执行npm run package, assets和theme会打包到Lib库中
• 但是如果你在宿主工程中执行ng build, 查看宿主工程的build结果, 你会发现资源文件并没有被build到宿主工程中

以assets为例, 没有build进来

以assets为例, 期待的结果

• 重要的一步: 在angular.json文件中增加以下内容, 让宿主工程可以使用Lib库中的资源文件和全局样式

angular.json

• 重新再试一次, 是不是OK了?

最后

• 源码地址

• TODO: 使用link的形式调试Lib库

---

参考资料

开发Lib库

Angular CLI 不能自动打包Lib库中的资源文件

嫌copy太low, 用第三方库来打包assets

嫌copy太low, 用第三方库来打包scss

npm报错: Unexpected end of JSON input while parsing near '...' , 执行npm cache clean --force