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 [templating] 为 dist/xxxAaa.html []

导入资源

于是第一个问题，为什么会这样？

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

然后，回滚到第一个，working状态和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 会在这里抱怨它找不到 class，但看起来它会选择错误命名的 class 并尝试使用它。异常本身很模糊（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>，您就可以在标记中使用 <xxx-aaa></xxx-aaa>。

aurelia、es6 和类名大小写

aurelia, es6 and classname case

javascript

ecmascript-6

aurelia

babeljs