ES6 导出和导入函数答案

【问题标题】：ES6 Exporting and Importing a FunctionES6 导出和导入函数
【发布时间】：2017-02-23 02:53:12
【问题描述】：

如果我有一个 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>

【问题讨论】：

当然，使用选项将默认值公开为您选择的变量。

标签： javascript ecmascript-6 babeljs script-tag es6-modules

【解决方案1】：

上面代码的转译版本是这样的，

"use strict";

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

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

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

【讨论】：

如果我想制作一个单文件转译插件，在这种情况下，需要在转译之前进行导入吗？那么这些属性可以作为文件访问吗？
如果我利用 babel / webpack 来压缩到一个文件，那么是否可以将压缩文件中的脚本附加为另一个文件中的访问方法？
@Yasir 所以你在使用 webpack？你应该这么说的。

【解决方案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);

请注意，这违背了使用模块的全部意义，应该非常谨慎使用。

【讨论】：

这是有道理的。预期的最终用例是将 es6 视为您通过 script 标签添加的 es5 js。这个想法是你有 es6 的方式，导出/导入，以及标准的 es5 方式。打算成为一个插件。
一旦一些浏览器开始提供实际实现，看看所有这些如何互操作将会很有趣。

【解决方案3】：

好的，我通过使用 Webpack 提供输出变量解决了这个问题。很好的文章，谈到了这一点—— http://siawyoung.com/coding/javascript/exporting-es6-modules-as-single-scripts-with-webpack.html

【讨论】：