问es6模块的生命周期

EN

ES6模块的灵感来自于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)

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

编写ES模块，然后使用像this这样的东西来提供一些东西给你的用户，他们可以通过他们选择的方法轻松地消费: commonJS，AMD，global，他们的选择不需要你做更多的工作，只需要一个构建管道步骤。

移除IIFE包装器并导出您正在分配的内容。

关于webpack的备注：

Webpack使用一个..。不能实际使用的模块的语法，例如<script type="module">。因为在这一点上，webpack几乎是一个行业标准，所以我不提它是不负责任的。不幸的是，在上面的设置下，它并没有发挥出那么好的效果。据我所知，这仍然是一个悬而未决的问题。