如何在浏览器中使用已编译的ES6到ES5文件？

Question

我在ES6中有两个模块：

//mycalss.js
class MyClass {
}
export {MyClass};

//main.js
import {MyClass} from './../src/myclass';

我正在使用Laravel-mix来处理编译和捆绑过程。

最后我得到了main.js。

我在html中链接这个文件。

<script type="text/javascript" src="main.js"></script>

尝试引用类MyClass：

<script type="text/javascript">

    var object = new MyClass();

</script>

但是抛出Uncaught ReferenceError: MyClass is not defined。

那么，如何在我的html中使用从es6到es5编译的classe？

Answer 1

ES6模块具有模块范围。这可以防止它们将变量泄漏到全局范围。这正是模块化的目的。

为了在全局范围内使用来自ES6模块的项目（同样适用于实现模块模式的CommonJS模块或IIFE），必须将它们定义为全局变量。对于客户端脚本，这意味着它们应该在捆绑应用程序中定义为window属性：

window.MyClass = MyClass;

这表明潜在的XY问题。更好的选择是重新考虑它应该在全球范围内可用的原因。如果已经捆绑了ES6应用程序，它也应该从内联<script type="text/javascript">...</script>运行代码。

Answer 2

您可以使用Babel在浏览器中将JavaScript从ES6编译为ES5。

通常，您必须使用webpack自动为您执行此操作并在HTML中插入脚本。