angular ui 组件库的编译走过的坑和分享过程

[wly19960911]

根据 how-to-build-and-publish-an-angular-module （需要翻墙），我探索了一次 angular 组件编译过程。

但是根据 angular 的组件库编译过程，还算碰到了几个坑。

1. 项目引用 TS 的位置问题

   angular4 开始，不是任何位置的 ts 文件都能被 import。 比如 ts 文件是在 /component/table.module.ts ，但是项目的文件是在 /src 里面。有些人肯定想问为什么这么做，主要是 组件库 分离展示用的页面的原因，剥离 /src 目录。原来我们公司的组件库和展示平台是混在一起的，非常不美观，而且效率很差。

2. 项目编译的时候引用的静态资源 import 的问题。

   有关静态资源的引用，比如 @Component 里面的 templateUrl 和 styleUrls ，在使用 ngc 编译的时候，是不会处理成字符串，最后变成 require('./table.component.css')，使用的时候变成从 http://localhost:4200/table.component.css 去导入，这样的情况对于编译的时候开发是对于有个展示平台的调试开发是很麻烦的。当时我知道的解决方案是所有的 style 和 template 写在 talbe.component.ts 文件里面。

碍于上面两个问题，让我在对一个 UI 组件库 的构造上花了不少功夫去探索。

在此感谢阿里的 NG-ZORRO-antd 的有关 静态资源 import 解决方法。

---

目前暂时做成的目录树是: ( 目录的问题，我自己待会会处理 )

.
├── build_scripts
├── common-css
├── dist
├── ui-datepicker
├── ui-table
├── ui
├── node_modules
├── package.json
├── package-lock.json
├── protractor.conf.js
├── README.md
├── src
├── tsconfig-datepicker-build.json
├── tsconfig.json
├── tsconfig-table-build.json
├── tsconfig-ui-build.json
└── tslint.json

目前是 ui ui-datepicker ui-table 是我们需要的组件库， src 是单独的用来调试的展示平台。

可以看见的组件库已经分离出了 /src 路径，所以我们需要把通过设置去修改，让 ts 能够引用我们的组件库文件。

解决方案如： missing-ts-files-due-to-npm-link

---

其实第一个问题并没有什么难度，我只是根据各种 UI 框架 的思路，把组件和展示页面分离开，让我们能调试编译都更为直观和方便。

第二个问题才是最麻烦的。ngc 的编译不会把 templateUrl 和 styleUrls 去进行处理，那么我们编译的时候必然要写成内联的形式，所有的都写在 .ts 文件中。

其中 style 如果引用统一的 css 库 的话那么我们就不需要写组件单独的 .css 文件了。但是 template 难免需要单独写在 html 里面，另外有个问题还有如果引用了图片，那么又是另外一回事了。（主要是老组件的升级，带着图片，很无奈。）

我翻了好几个 UI 框架 都是写成了内联的形式。所以最近一段时间都没什么好的方案去解决这个问题。

我最近突然翻到了阿里的 ng-zorro-antd 的 ui 框架，里面提供的思路是复制一份 /component 到 __gen_components ,然后编译之前运行 nodejs 的 inline-template.js 脚本，自己去处理 templateUrl 的问题。

然后我稍微改造了下他们的 js，支持了 styleUrls 和 图片问题。如下

https://gist.github.com/xiao-po/ee27c25969354871bdc60518575bff8e

（主题里面不能用 gist ？好像没效果）

希望大家如果有什么相关的意见可以提一提，第一次处理这种问题，所以很多欠缺和不熟练的错误。如果有关目录的问题，我自己待会会处理。

[fulvaz]

你可能只是需要 ng-packgr, 或者是使用 angular-cli@6 的 lib 就可以解决不少问题.

[wly19960911]

@fulvaz #1 看了下一些资料，的确有可能是需要的，我现在去看看，主要是这方面的资料太少了，我只能去相关的 UI 框架去获取他们的做法，所以很无奈。

[fulvaz]

@wly19960911 我非常不推荐折腾如何打包. 掌握的东西太多, 而且没啥卵用, 特别是你还可能会遇到什么推荐你用 secondary entry 这种东西, 实际上有 tree shake 已经足够了, 而且还要去了解 Angular Package Format 是啥, 太折腾人了

话说我用 ng-packar 貌似完全没遇到样式上的问题, 真要去探索这个吗, 我觉得意义不大. 人家已经做得很好了.

[wly19960911]

@fulvaz #3 不是我想折腾，是这个是必要的，另外这个问题的确解决了，可是还有个问题是图片不能自动转换成 base64，感谢推荐

[wly19960911]

@fulvaz #3 主要是我没有查到相关的东西，我也是没怎么接触过 angular 的开发。公司里面也没什么人会，所以我过来处理这个问题， 然后加上旧 ts 组件的升级，所以很无奈。

[fulvaz]

@wly19960911 所以直接 ng-packagr 呗

转换为 base64
https://github.com/dherges/ng-packagr/blob/master/docs/embed-assets-css.md

ng-packagr 底层用 rollup, rollup 能做到的 ng-packagr 大部分能做到, 就是要研究一下

[wly19960911]

@fulvaz #6 的确可以，美中不足的是 template 里面的 src 不能转换。我再研究研究，非常感谢

[fulvaz]

@wly19960911

嗯, 应该能做到. 不行使用 gulp 转换就好了