Aurelia：如何使用 npm 包中的视图/视图模型？答案

【问题标题】：Aurelia: How to use a View/Viewmodel from an npm package?Aurelia：如何使用 npm 包中的视图/视图模型？
【发布时间】：2017-06-24 12:02:37
【问题描述】：

我们正在使用 Aurelia 作为我们应用程序的前端。由于我们将有几个基于它的不同项目，我希望能够将我们所有的自定义代码添加到开发人员可以添加的一些 npm 包中。这将允许我们创建一个新的空项目，将依赖项添加到我们的可重用代码中，而无需将其包含在项目的代码库中（因此可以在需要时单独更新）。

例如，我想要一个工具包和一个服务包。这当然很容易。

但我不知道如何使用包含我们所有自定义可重用组件的“ui”包。这甚至可能吗？我如何在 html 模板中需要一个组件？

如果无法做到这一点，是否有人知道如何将可重用代码与应用程序特定代码清晰地分开？

非常感谢！

【问题讨论】：

标签： javascript npm aurelia code-separation

【解决方案1】：

当然可以，aurelia 的很多插件都是这样做的。一种方法是将您的组件注册为全局资源（在您的包或插件中）并将它们导入您的客户端应用程序，CLI 示例：

// from your plugin
aureliaConfig.globalResources([
    './jqm-loader',
    './jqm-page',
    './jqm-footer',
    './jqm-header'
]);

然后将它们导入您的应用：

// aurelia.json
{
    "name": "my-reusable-widgets",
    "path": "../node_modules/my-reusable-widgets",
    "main": "index",
    "resources": [
          "**/*.{css,html}" //to load them all or you can add individual files
     ]
}

然后使用您的小部件：

<jqm-loader></jqm-loader>
...

如果你不想使用 globalResources，你也可以使用 require：

<require from="my-reusable-widgets/jqm-header"></require>
<jqm-header></jqm-header>

【讨论】：

非常感谢！我从 Gitter 官方频道收到了类似的回答，但您的回答非常详尽。我在使用插件时仍然遇到一些问题，因为在加载组件时出现“脚本错误”，但我想我应该找到解决办法。