javascript - aurelia、es6 和类名大小写

Question

我正在研究 aurealia 中的自定义组件，并遇到了我不理解的奇怪行为。考虑一下:

组件: xxxaaa.html

<template>
    <div>xxxxxx</div>
</template>

xxxaaa.js:

export class Xxxaaa {}

app.html:

<template>
    <import from='./xxxaaa'></import>
    <div>
        <xxxaaa/>
    </div>
</template>

这按预期工作，显示了 xxxxxx。然后，驼峰式组件:

xxxAaa.html: 内容未更改，仅文件名

xxxAaa.js:

export class XxxAaa {}

app.html:

<template>
    <import from='./xxxAaa'></import>
    <div>
        <xxxAaa/>
    </div>
</template>

没有显示任何内容，但日志不包含任何错误，仅:

信息 [aurelia] Aurelia 已启动 index.js:26 DEBUG [模板] 导入 dist/app.html 的资源 ["dist/xxxAaa"] index.js:26 DEBUG [模板] 导入 dist/xxxAaa.html 的资源 []

所以第一个问题，为什么会这样？

更新:在我看来，这要么是 aurelia 中的错误(它无法正确报告错误制作的自定义 elt)，要么是我对其实际工作原理的理解存在重大差距。您能否确认这是一个错误，或者解释一下为什么 aurelia 默默地忽略我的元素。

然后，回滚到第一个工作状态，并将 xxxaaa.js 更改为

export class xxxaaa {}

控制台日志错误:

Potentially unhandled rejection [1] TypeError: Cannot call a class as a function
    at execute._classCallCheck (http://localhost:9090/dist/xxxaaa.js:9:108)
    at xxxaaa (http://localhost:9090/dist/xxxaaa.js:12:9)
    at Container.invoke (http://localhost:9090/jspm_packages/github/aurelia/dependency-injection@0.4.5/container.js:362:27)
    at Array.<anonymous> (http://localhost:9090/jspm_packages/github/aurelia/dependency-injection@0.4.5/container.js:142:52)
    at Container.get [as superGet] (http://localhost:9090/jspm_packages/github/aurelia/dependency-injection@0.4.5/container.js:238:32)
    at Container.elementContainerGet [as get] (http://localhost:9090/jspm_packages/github/aurelia/templating@0.8.14/view-factory.js:27:17)
    at CustomElement.create (http://localhost:9090/jspm_packages/github/aurelia/templating@0.8.14/custom-element.js:136:80)
    at applyInstructions (http://localhost:9090/jspm_packages/github/aurelia/templating@0.8.14/view-factory.js:79:33)
    at ViewFactory.create (http://localhost:9090/jspm_packages/github/aurelia/templating@0.8.14/view-factory.js:172:17)
    at CustomElement.create (http://localhost:9090/jspm_packages/github/aurelia/templating@0.8.14/custom-element.js:141:58)

第二个问题来了——是什么导致了这种区分大小写的情况？是 es6、babel 还是 aurelia？

更新:我预计 aurelia 会提示它找不到类，但看起来它选择了错误命名的类并尝试使用它。异常本身非常模糊( https://github.com/babel/babel/issues/887 、 https://github.com/babel/babel/issues/700 )，但我是否正确理解它，这又是 aurelia 错误报告不佳的情况？

Answer 1

Aurelia 永远不会看到驼峰标记，因为 DOM 将元素和属性名称小写。

查看this回答以获取更多信息。以下是摘录:

One other thing to be aware of though: In all browsers, when the browser loads the HTML document and parses it, it converts it into a DOM (Document object model). If you then use the browser's built-in developer tools to inspect the site, when you view the DOM, all elements in the DOM will be shown as lower case, regardless of how they were written in the actual source code.

另一种方法:

如果您将类(class)命名为 XxxAaaCustomElement Aurelia conventions will kick in您将能够使用<xxx-aaa></xxx-aaa>在您的标记中。