你如何使用内联的Babel Compiled类？

Question

我的src / index.js文件包含一个类：

export default class Test {
  constructor() {
    this._name = 'Test';
  }
}

Babel然后将其编译为es5文件。 在我的index.html文件中，我希望有类似的内容：

<script src="lib/library.js" type="text/babel"></script>

接下来是：

<script type="text/javascript">
      var test = new Test();
</script>

但是，我没有定义'测试'。如何在我的index.html中使用es5内联js，其中类是在babel编译的文件中导出的？

感谢。

Answer 1

设计的ES6模块不会通过内部定义污染全局状态，这也意味着您无法在不明确导入导出的情况下访问导出。

使您的课程全球可访问的一个解决方案是明确地这样做：

class Test {
  constructor() {
    this._name = 'Test';
  }
}

window.Test = Test

现在，您应该可以在代码中的任何位置实例化您的类。

Answer 2

默认情况下，babel将类转换为只能在Common JS环境中使用的模块。

您可以使用this babel plugin将您的模块转换为UMD，这将设置一个可在<script>标记中访问的全局变量。