将闭包转换为es6模块

Question

我正在使用一个支持es6模块的javascript构建环境（使用es6-module-transpiler），因此您可以轻松地跨不同文件导入内容。

现在，我有了一个第三方库，我希望它是“可导入的”。

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

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

省略闭包并将其转换为：

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

或者，还有更好的方法？

提前致谢！

Answer 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';