javascript - 100% ESM 模块世界 - 这是什么意思？

Question

在阅读 webpack 文档中有关 tree shaking 的内容时，我遇到了这句话:

In a 100% ESM module world, identifying side effects is straightforward. However, we aren't there just yet.

“100% ESM 模块”是什么意思，它与我们今天使用的当前 import 和 export 有何不同？

引用:https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free

Answer 1

您正在阅读的文档对比了两种类型的脚本:

• 通过import 和export
公开它们所做的 一切的脚本
• 在导入和导出之外做一些事情的脚本(这可以被视为“副作用”)

考虑一个大型库，一个将自身安装为全局对象上的命名空间以公开其功能的库。假设 jQuery 做到了这一点——也就是说，它运行类似

const jQuery = (function() {
  // lots and lots of code
})();
export default jQuery;
window.jQuery = jQuery;

这包含一个副作用:行

window.jQuery = jQuery;

这意味着您的应用程序的其他部分可以使用 window.jQuery，而无需专门将 jQuery 导入该模块。例如，您可能有

// someModule.js
export const doStuff = () => {
  window.jQuery('div').text('Hi!');
};

这可以在没有线的情况下工作

import jQuery from 'jQuery';

在模块脚本中，因为 jQuery 在窗口上。 (要实现这一点，需要在某处至少一个模块执行 import 'jQuery'; 或类似的操作，以便 jQuery 的代码将自身分配给窗口运行)

由于副作用，Webpack 将很难自动摇树 - 你必须 explicitly note哪些模块依赖于有副作用的模块。

相比之下，没有依赖副作用的模块将是上面的someModule.js示例:它所做的只是导出一个函数 ，无需在其他地方添加或更改功能。

因此，通过“100% ESM 模块”，Webpack 可能指的是所有模块的依赖项都是显式的脚本，带有import 语句，而不是必须依赖副作用(如非导入模块将某些东西分配给窗口)。