我正在使用支持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模块
发布评论