创建aurelia自定义元素作为npm包(使用Aurelia CLI)

时间:2017-06-19 20:33:46

标签: npm aurelia custom-element aurelia-cli

我使用Aurelia CLI创建SPA,与使用Jspm相比,它使一切变得更加容易。

但是现在我们有一些自定义元素,例如:<my-custom-element></my-custom-element>我们想要打包成npm包,这样我们就可以在多个/其他Aurelia CLI项目中使用它。

我将如何创建它?我无法找到有关此问题的任何示例或文档。

我的猜测是我需要转换我的自定义元素文件,以便最终得到一个包含.js文件的npm包(我们使用typescript)和正确的模块加载器synax(CommonJS?)?

我的理解是,我不能简单地创建一个包含my-custom.element.ts + my-custom-element.html文件的npm包,因为它需要被编译,捆绑等等。

我也猜测我不能简单地执行au build并使用我的捆绑包,因为这会捆绑整个SPA,而不仅仅是我的自定义元素文件?

那么我需要执行哪些步骤来创建包含可添加到Aurelia CLI项目的自定义元素的npm包?

非常欢迎任何帮助或样品!谢谢!

1 个答案:

答案 0 :(得分:1)

有很多方法可以做到这一点。但是,为了简单起见,我将推荐用于开发插件的官方Aurelia插件框架,您可以在Github here上获得。如果您冒险进入Sub Autochart() Dim chtObj As ChartObject Dim PvtSht As Worksheet Dim PvtTbl As PivotTable ' set the Pivot sheet Set PvtSht = Sheets("CAT_Pivot") ' set the Pivot Table object Set PvtTbl = PvtSht.PivotTables("PivotTable1") ' set the Chart Object Set chtObj = PvtSht.ChartObjects.Add(300, 200, 550, 200) ' modify ChartObject properties With chtObj .Chart.SetSourceData PvtTbl.TableRange2 ' set the chart's data range to the Pivot-Table's TableRange2 .Chart.ChartType = xlColumnClustered .Name = "EChart1" End With End Sub 文件夹,您将看到一个自定义元素的基本示例以及如何使其全局化。插件框架使用Gulp进行构建任务,可以在build/tasks目录中找到。

目前,您无法使用Aurelia CLI创建插件。但是在将来,您很可能会将此功能添加到CLI中,因为它不仅仅是用于创建应用程序的CLI。