使用自定义属性的 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 build，然后在我的主应用程序中重新安装该软件包。在主应用程序中 npm start 构建正常，但浏览器给了我错误： 找不到模块'./aurelia-skeleton-plugin/red-square'

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

Answer 1

这里有一些可以尝试的方法——尽管我从您提供的链接中的教程中得到了开箱即用的方法。

确认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>