javascript - 如何在浏览器中使用编译好的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 的类？

Answer 1

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

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

window.MyClass = MyClass;

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