使用自定义属性的 aurelia 自定义插件 - 找不到自定义属性

Question

您好，我已经从 https://github.com/aurelia/skeleton-plugin 下载了 hello world aurelia skelton 插件。然后我在 aurelia esnext/webpack skelton (https://github.com/aurelia/skeleton-navigation/tree/master/skeleton-esnext-webpack) 的新副本中引用 package.json 文件作为我的主要应用程序。然后我可以在我的组件之一中使用插件

<require from="aurelia-skeleton-plugin/hello-world"></require>

在视图的顶部并将 <hello-world></hello-world> 放置在视图的任意位置。这很好用。

我想尝试的下一步是向我的插件添加自定义属性。在我的插件的 src 文件夹中，我添加了简单的自定义属性

export class RedSquareCustomAttribute {
  static inject = [Element];

  constructor(element){
    this.element = element;
    this.element.style.width = this.element.style.height = '100px';
    this.element.style.backgroundColor = 'red';
  }
}

然后我在我的 hello-world.html 页面中使用以下代码引用它

<require from="./red-square"></require>
  <div red-square></div>

运行 gulp 构建，然后在我的主应用程序中重新安装包。在主应用程序 npm start 中构建正常，但浏览器给我错误：找不到模块'./aurelia-skeleton-plugin/red-square'

我阅读了很多文档，但没有给出这种情况的示例，我们将不胜感激。

Answer 1

这里有一些要尝试的东西 - 虽然我从您提供的 link 中的教程中得到了开箱即用的方法。

确认 config.js 中的 babelOptions 有 classProperties.

  babelOptions: {
    "optional": [
      "runtime",
      "optimisation.modules.system",
      "es7.classProperties"
    ]
  },

接下来，请仔细检查您的文件是否正确放置在 src 文件夹中并命名为：

red-sqaure.js
simple-attribute-usage.html

然后，无论哪个 HTML 文件包含您的内容 - 您的 shell / 应用程序，执行如下操作：

<compose view="simple-attribute-usage.html" viewmodel="red-square"></compose>

虽然我能够让原始 HTML 工作

<require from="./red-square"></require>
  <div red-square></div>

使用自定义属性的 aurelia 自定义插件 - 找不到自定义属性

aurelia custom plugin that uses a custom attribute - cant find custom attribute

node.js

webpack

aurelia