ES6 导出和导入函数

Question

如果我有一个 ES6 JS 文件 (test.js) ...

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

使用 Babel，是否可以在 index.html 文件中转译和调用它

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

并开始使用该函数而不需要将其导入到另一个 js 文件中？对于前。之后的下一个脚本标签将包含以下代码。这是与 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 提供输出变量解决了这个问题。伟大的文章说明了这一点—— http://siawyoung.com/coding/javascript/exporting-es6-modules-as-single-scripts-with-webpack.html

ES6 导出和导入函数

ES6 Exporting and Importing a Function

javascript

script-tag

ecmascript-6

babeljs

es6-modules