javascript - 构建 Angular2 组件库的最佳方式是什么？

Question

我希望在 Angular2 日期选择器组件上工作，就好像要发布和包含在多个项目中一样。与使用 angular-cli 构建的常规 Angular2 项目相比，为此构建项目的最佳方式是什么？对于这样的任务，有没有好的启动项目/种子的例子？或者组件库实际上应该是一个 angular2 应用程序本身？

我最初的假设是我可以用 angular-cli 创建一个标准项目，它有一个模块(例如 MyDatepickerModule)，其中包含构成datepicker 但是我不知道这是否是最好的方法，因为我不需要完整应用程序提供的所有内容。

感谢您的指导!

Answer 1

我会在发布库时考虑到 AoT 兼容性。

这意味着使用 ngc 编译器编译源代码。在分发包中，我将发布 JS 源代码、原始 html/css 文件、d.ts 类型文件和 ngc 生成的 metadata.json 文件。

我建议使用 es2015 模块发布 JS 源代码，因为这将使您的库树可摇动。我会以 es5 JS 为目标，但使用 es2015 模块。 TypeScript 通过在 tsconfig.json 中将模块设置为 ES2015 并将目标设置为 es5 来允许这种混合模式。

发布这些文件将使您的库与 AoT 兼容并可进行 Tree shaking。

这是将您的库编译成完整应用程序所需的所有消费应用程序。

不建议在您的包中发布 TypeScript，因为这需要消费者复制您的构建环境(类型 + TS 编译器版本)。

您还可以使用内联模板和 CSS 发布与 JiT 兼容的 umd 包。这可能很有用，因为在开发过程中执行 AoT 可能不切实际，因为编译速度有点慢。 umd 包将使您可以在基于 JiT 的开发环境中使用您的库。尽管对于生产，您绝对应该使用 AoT 版本。

CLI 不是发布库的理想选择，因为 CLI 主要是用于构建完整应用程序的工具。不过，他们将来可能会更好地支持图书馆。