Question

如果我有ES6 JS文件（test.js）......

export default function() {
  let foo = "test"
  return foo
}

使用Babel，是否可以在index.html文件中进行转换并调用它

<script src="js/text-min.js"></script>

开始使用该功能而无需将其导入另一个js文件？对于Ex。之后的下一个脚本标记将具有以下代码。这与Webpack一起使用 -

<script>
  var bar = new foo();
  console.log(bar);
</script>

Answer 1

上面代码的转换版本会像这样生成，

"use strict";

   Object.defineProperty(exports, "__esModule", {
     value: true
   });

  exports.default = function () {
     var foo = "test";
     return foo;
  };

如您所见，它为名称为__esModule的导出对象添加了一个属性。没有其他的。因此，您无法在不使用import或require的情况下包含此默认函数。

Answer 2

您实际需要的是一个全局变量（这可能不是一个好主意）。例如：

第1单元：

import {foo} from 'foo'; // still an ES6 module, just no export

// global variable 'bar'
window.bar = (...args) => foo(...args) + 6;

然后在第2单元中：

bar(1, 3, 5);

请注意，这会破坏使用模块的整个过程，并应谨慎使用非常。

Answer 3

好的，所以我通过使用Webpack提供输出var来解决这个问题。很棒的文章说明了这一点 - http://siawyoung.com/coding/javascript/exporting-es6-modules-as-single-scripts-with-webpack.html

ES6导出和导入函数

3 个答案: