将闭包转换为 es6 模块答案

【问题标题】：Convert closure to es6 module将闭包转换为 es6 模块
【发布时间】：2014-11-08 13:12:15
【问题描述】：

我正在使用支持 es6 模块 (using es6-module-transpiler) 的 javascript 构建环境，因此您可以简单地跨不同文件导入内容。

现在我有一个我想“可导入”的第三方库。

该库以如下方式填充其功能：

(function () {/*...*/}).call(this);

省略闭包并将其转换为：

export default function () {/* ... */};

或者有更好的方法吗？

提前致谢！

【问题讨论】：

这很大程度上取决于/*...*/。目前，那个 IIFE 似乎没有导出任何东西，所以我不确定你从哪里得到默认导出和函数。
请edit你的问题回答我的评论，我可以回答你的问题。

标签： javascript ecmascript-6 code-translation

【解决方案1】：

您展示的原始代码调用匿名函数，为了有意义，它必须定义一个全局变量，而您展示的第二个代码片段仅导出该函数，这是另一回事。

出于讨论的目的，我们假设原始代码定义了一个像这样的全局：

// my-third-party-module.js
(function() {
  let myVar = 22;
  window.MyThirdPartyModule = { log: function() { console.log(myVar); } };
}.call(this);

你使用的是这样的：

// app.js
MyThirdPartyModule.log();

你可以把它改写成

// my-third-party-module.js
let myVar = 22;
export default { log: function() { console.log(myVar); } };

// app.js
import MyThirdPartyModule from `my-third-party-module';
MyThirdPartyModule.log();

请注意，我们已将匿名函数的本地变量 myVar 移动到顶级模块级别。

但是，根据您的喜好，您可能希望单独导出它的 API，而不是导出一个大对象（这是一种预模块的心态）：

// my-third-party-module.js
let myVar = 22;
export function log { console.log(myVar); }

// app.js
import {log} from `my-third-party-module';
log();

或者如果你喜欢

// app.js
import * as MyThirdPartyModule from `my-third-party-module';
MyThirdPartyModule.log();

但是，所有这些方法都假定您能够并且愿意编辑第三方库的源代码。如果不是这样，你可以写一段胶水代码，比如

// my-third-party-module-interface.js
import 'my-third-party-module';    // This will run the module.
export default MyThirdPartyModule; // Export the global it defined.

// app.js
import MyThirdPartyModule from 'my-third-party-module-interface';

如果您希望再次导出单个 API，可以扩展胶水以重新导出每个 API：

// my-third-party-module-interface.js
import 'my-third-party-module';    // This will run the module.

const {log, otherAPI, ...} = MyThirdPartyModule;
export {log, otherAPI, ...};

// app.js
import {log} from 'my-third-party-module-interface';

【讨论】：

【解决方案2】：

遗留依赖项的转换仍然是一个问题。他们使用的可怕工作流程让事情变得更加困难，在实际代码前加上 browserify 和 webpack 愚蠢。

那该怎么办？从本质上讲，图书馆只保证在窗口中存放一个全局变量，但通过晦涩和奇怪的方式。而且都略有不同。

所以让遗留系统简单地做它应该为你做的事情，但是包装在一个模块中，这样你就可以导入它而不是使用脚本标签：

https://medium.com/@backspaces/es6-modules-part-2-libs-wrap-em-up-8715e116d690

【讨论】：