Question

我正在使用支持es6模块（using es6-module-transpiler）的javascript构建环境，因此您只需在不同文件中导入内容即可。

现在我有一个第三方图书馆，我想成为＆＃34;可导入的＆＃34;。

库填充其功能如下：

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

省略闭包并将其转换为：

是否安全

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

还是有更好的方法吗？

提前致谢！

Answer 1

您显示的原始代码调用匿名函数，任何意义都必须定义一个全局变量，而您显示的第二个代码片段只导出函数，这是另一回事。 / p>

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

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

Answer 2

传统依赖项的转换仍然是一个问题。而他们使用的可怕工作流程使事情变得更加艰难，为实际代码添加了浏览器和webpack愚蠢的前缀。

那该怎么办？存在的是，图书馆只保证在窗口中存放全局，但是通过模糊和奇怪的方式。并且都略有不同。

因此，让遗产只是按照它应该为您做的事情，但包装在一个模块中，以便您可以导入它而不是使用脚本标记：

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

将闭包转换为es6模块

2 个答案: