ecmascript-6 - 在 html 脚本标签中使用 es6 类

Question

我想开始在 ES6 的类中编写我的 JS 代码。

我正在制作模块并将它们转录到 es5 中webpack 2。

但是如何在 HTML 中使用它们？

<script>
var test=new Test();//Test not defined
</script>

我错过了什么？

Answer 1

如果您已经在 ES6 中编写了一半的代码，为什么还要尝试在脚本标签中编写代码？script只需在另一个模块的标签中编写您尝试编写的代码。

见https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact&code=class%20Greeter%20%7B%0D%0A%20%20%20%20greeting%3B%0D%0A %20%20%20%20构造函数（消息）%20%7B%0D%0A%20%20%20%20%20%20%20%20this.greeting%20%3D%20消息%3B%0D%0A% 20%20%20%20%7D%0D%0A%20%20%20%20greet()%20%7B%0D%0A%20%20%20%20%20%20%20%20return%20% 22Hello%2C%20%22%20%2B%20this.greeting%3B%0D%0A%20%20%20%20%7D%0D%0A%7D%0D%0A%0D%0Alet%20greeter%20% 3D%20new%20Greeter(%22world%22)%3B%0D%0A%0D%0Alet%20button%20%3D%20document.createElement ('button')%3B%0D%0Abutton.textContent%20%3D%20 %22Say%20Hello%22%3B%0D%0Abutton.onclick%20%3D%20function()%20%7B%0D%0A%20%20%20%20alert(greeter.greet())%3B%0D% 0A%7D%0D%0A%0D%0Adocument.body.appendChild(按钮)%3B