沿着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

恕我直言，ES24模块的灵感来自于IIFE的价值，封装是一项重要的好处。 因此，重构IIFE可能很简单。

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

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

下一个挑战是识别公共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)

Answer 2

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

写ES模块，然后使用类似这样提供的东西你的用户，他们可以通过自己选择的方法很容易消耗：CommonJS的，AMD，全球性的，他们的选择与比构建流水线步之外的其他部分没有更多的工作。

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

关于webpack的注意事项：

Webpack使用... ES2015-ish语法用于实际上不能与例如<script type="module"> 。 由于webpack在这一点上几乎是一个行业标准，我不能不提它。 不幸的是，它并没有在上面的设置中发挥出色。 据我所知，这仍然是一个悬而未决的问题。