将封闭转换为es6模块 [英] Convert closure to es6 module

问题描述

我正在使用支持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';

这篇关于将封闭转换为es6模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！