Question

我想了解如何使用与Aurelia一起使用的JSPM插件。我想将它与WebPack一起使用。该插件为Aurelia-Chart，在我的src文件夹中.feature('aurelia-chart')（在main.js文件中）本地使用时效果很好但当然最终目标是使用它外部通过.plugin('aurelia-chart')。

我认为最大的问题是该插件是通过位于index.js下的node_modules\aurelia-chart\dist\commonjs\index.js文件调用的。这个index.js引用了更深层目录中的其他一些文件，我认为WebPack正在迷失这些其他文件的路径。

在index.js

内

aurelia.globalResources("./elements/chart-element", "./attributes/chart-attribute");

我得到的错误是

Unhandled rejection Error: Cannot find module './aurelia-chart/elements/chart-element'.

我确实试图通过Aurelia Skeleton-Plugin从头开始创建插件，但即使是通过JSPM构建（除非我误解）骨架，并且不能很好地处理WebPack或RequireJS。我还尝试删除所有文件夹并将路径引用更改为在同一文件夹中，但没有帮助。

我还发现此Github issue与我的问题非常相似，在问题结束时，该问题的答案是使用Resource and bundling configuration，如下所示：

// (package.json)
"aurelia": {
    "build": {
        "resources": [
            {
                "path": "users",
                "bundle": "users",
                "lazy": true
            }
        ]
    }
},

我尝试重复使用这段代码并将其更改为以下内容：

// (package.json)
    "aurelia-chart": {
        "build": {
            "resources": [
                "./~/aurelia-chart/dist/commonjs/elements/chart-element",
                "./~/aurelia-chart/dist/commonjs/attributes/chart-attribute",
                "./~/aurelia-chart/dist/commonjs/observers/model-observer"
            ]
        }
    }

我花了两天的时间尝试通过所有类型的捆绑过程使用.plugin('aurelia-chart')在外部工作（我从aurelia-auth，aurealia-authentication，aurelia-animator-css获取了示例。）但我的尝试都没有奏效。

请再次注意，它可以通过.feature('aurelia-chart')在本地运行。我想帮助作者和社区使用这个伟大的插件（可能还有我自己的插件）。我已经打开了一个关于这个问题的Github issue，作者非常好，非常乐于助人，但对于如何使其成为像WebPack或RequireJS（CLI）这样的捆绑工作也毫无头绪。我希望有一个适用于WebPack和新Aurelia CLI的解决方案，以便进行捆绑。

Answer 1

试试这个：

// (package.json)
"aurelia": {
  "build": {
    "resources": [
      "aurelia-chart/elements/chart-element",
      "aurelia-chart/attributes/chart-attribute"
    ]
  }
},

Answer 2

最新aurelia-cli（0.32.0）+ webpack使用chart.js 2.5.0并使用main.js中的全局资源

aurelia.use.plugin(PLATFORM.moduleName('aurelia-chart'));
aurelia.use.globalResources(PLATFORM.moduleName('aurelia-chart/elements/chart-element'));
aurelia.use.globalResources(PLATFORM.moduleName('aurelia-chart/attributes/chart-attribute'));

如何在WebPack中使用Aurelia JSPM插件

2 个答案: