javascript - 沿 es6 模块生活

Question

我有一个基本上是设置全局变量的 IIFE 的库，客户端应该对所述变量进行操作。所以，在 module.js 中，我有类似的东西

window.myModule = (function(){
    ...

    return {
        foo: foo,
        bar: bar
    }
})();

我想让它与 ES6 模块兼容，这样我就可以做到

import * as theModule from 'module.js';

还有

<script src="module.js"></script>

如何实现？我记得有些库是那样的(甚至与 AMD 兼容)，但我什至不知道要搜索什么。

Answer 1

ES6 模块，恕我直言，受到 IIFE 值(value)的启发，封装是一个重要的好处。因此，重构 IIFE 可能很简单。

首先，您可以删除 IIFE 包装器(您不必这样做，但保留它没有任何好处，您可能必须小心，因为您传递的参数的范围可能不同)。

如果您知道该库仅适用于浏览器并且您希望保持向后兼容性，那么您可以将 root 变量替换为 window。

下一个挑战是识别公共(public) API 并将其导出。因此，假设一些原始 API 如下所示:

root.MyLib.prototype.somePublicFn = function () {...}

你可以像这样导出这个函数

export let somePublicFn = function () {...}

而且，当你这样做的时候

import * as libFns from 'myLib'

libFns 将充当一种命名空间，让您可以这样做，

libFns.somePublicFn(...)

在导入模块中。

而且，就像我上面提到的，如果你想也在全局范围内提供这些导出，你必须自己手动连接并做类似的事情

const api = {
  somePublicFn
  ...
}
root.MyLib.prototype = Object.assign(root.MyLib.prototype, api)