将封闭转换为es6模块

本文介绍了将封闭转换为es6模块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用支持es6模块的javascript构建环境（使用es6-module-transpiler ），所以你可以简单地导入不同文件的东西。

现在我有一个第三方库，我想要可导入。 >

图书馆填充了这样的功能：

（function（）{/ * ...... * /}）调用（本）;

是否可以省略关闭并将其转换为：

export default function（）{/ * ... * /};还有更好的方法吗？

提前感谢

解决方案

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

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

// 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 MyThirdParty 我的第三方模块模块; MyThirdPartyModule.log（）;

请注意，我们已经将变量 myVar 这是顶级模块级别的匿名功能的本地。

然而，根据您的偏好，而不是导出一个大对象，这是一个预模块您可能想要单独导出其API：

// my-third-party-module.js 让myVar = 22; 导出功能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（）;

然而，所有这些方法都认为您能够并愿意编辑第三方库的来源。如果不是这样，你可以写一些胶水代码，例如

//我的第三方-module-interface.js import'my-third-party-module'; //这将运行模块。 导出默认MyThirdPartyModule; //导出定义的全局值。 // app.js 从'my-third-party-module-interface'导入MyThirdPartyModule;

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

// my-third-party-module-interface.js import'my-third party - 模'; //这将运行模块。 const {log，otherAPI，...} = MyThirdPartyModule; export {log，otherAPI，...};来自'my-third-party-module-interface'的 // app.js import {log};

I'm using a javascript build environment that supports es6 modules (using es6-module-transpiler) so you can simply import stuff across different files.

Now I got a third party library that I'd like to be "importable".

The library populates its functionality like this:

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

Would it be safe to omit the closure and convert it to:

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

Or is there a better way?

Thanks in advance!

解决方案

The original code you show invokes the anonymous function, which to make any sense must define a global variable, whereas the second code fragment you show merely exports the function, which is a different thing.

For purposes of discussion, let's assume the original code defines a global like this:

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

and you are using is as so:

// app.js MyThirdPartyModule.log();

You could rewrite this as

// 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();

Note that we have moved the variable myVar which was local to the anonymous function to the top module level.

However, depending on your preferences, rather than exporting a big object, which is sort of a pre-module mentality, you might want to export its APIs individually:

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

or if you prefer

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

However, all of these approaches assume you are able and willing to edit the source of the third party library. If that is not the case, you could write a little piece of glue code, such as

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

If you would prefer again to export individual APIs, you could extend the glue to re-export each of them:

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