Javascript 沿es6模块的iife

我有一个库，基本上是一个IIFE，它设置了一个全局变量，客户端应该对这个变量进行操作。因此，在

module.js

中，我有如下内容

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

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

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

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

import * as theModule from 'module.js';

以及

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

---

如何才能做到这一点？我记得有些库是那样的（甚至兼容AMD），但我甚至不知道该搜索什么。

ES6模块IMHO的灵感来自IIFEs的价值，封装是一个重要的好处。因此，重构一个IIFE可能很简单

首先，您可以删除IIFE包装器（您不必这样做，但是保留它没有任何好处，而且您可能需要小心，因为您传递的参数的范围可能不同）

如果您知道该库仅用于浏览器，并且希望保持向后兼容性，则可以使用

窗口

替换

根

变量

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

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

你应该像这样导出这个函数

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

当你这样做的时候

import * as libFns from 'myLib'

libFns

将充当一种名称空间，让您可以

libFns.somePublicFn(...)

在导入模块中

而且，正如我上面提到的，如果你想也使这些出口产品在全球范围内可用，你必须亲自亲自接线并做类似的事情

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

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

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

---

您不需要将编写的代码与提供给他人的代码混为一谈：后者是一个工具问题

编写ES模块，然后使用类似这样的东西向用户提供他们可以通过他们选择的方法轻松消费的东西：commonJS、AMD、global，他们选择，除了构建管道步骤之外，您无需做更多工作

移除IIFE包装并导出您分配的内容

关于网页包的注意事项：

---

网页包使用。。。ES2015 ish语法适用于实际无法使用的模块，例如

。既然webpack在这一点上几乎是一个行业标准，我就不提它了。不幸的是，在上面的设置下，它并没有发挥出那么好的效果。据我所知，这仍然是一个悬而未决的问题

你能分享生命的签名吗？@seebackie Done。我不想再使用另一个构建步骤。我记得不久前检查过一个以

if

开头的模块，检查环境是否支持ES6模块，但我记不起下一步该做什么。@user4052054这实际上是不可能的。ES 6模块是静态链接的。在条件语句（或顶层以外的任何地方）中包含import或export语句是一个语法错误。有一项基于承诺的动态进口提案，但尚未标准化。这是构建步骤，或者继续写IIFE。