构建Angular2组件库的最佳方法是什么?

时间:2016-12-14 22:37:15

标签: javascript angular

我希望在Angular2 datepicker组件上工作,就像发布和包含在多个项目中一样。与使用angular-cli构建的常规Angular2项目相比,为此构建项目的最佳方法是什么?对于这样的任务,是否有任何好的入门项目/种子的例子?或者组件库本身应该是angular2应用程序吗?

我最初的假设是我可以创建一个标准项目angular-cli,它有一个单独的模块(例如MyDatepickerModule),其中包含构成日期选择器的组件层次结构但是我不知道知道这是否是最佳方式,因为我不需要完整应用程序提供的所有内容。

感谢任何指导!

2 个答案:

答案 0 :(得分:2)

我会在考虑AoT兼容性的情况下发布该库。

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

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

发布这些文件将使您的库AoT兼容并且树可以摇动。

为了将您的库编译到完整的应用程序中,这是所有消耗的应用程序需求。

不建议在您的包中发布TypeScript,因为这需要使用者复制您的构建环境(typings + TS编译器版本)。

您还可以使用内联模板和css发布与JiT兼容的umd软件包。这可能很有用,因为在开发过程中AoT可能不实用,因为编译有点慢。 umd包可以在基于JiT的开发环境中使用您的库。对于生产,你绝对应该使用AoT版本。

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

答案 1 :(得分:1)

结帐https://github.com/angular/material2。正在进行的工作,它是Angular2应用Material Design的控件和主题库,是学习构建自己的控件库的绝佳来源。

相关问题