什么是 .esm.js 文件，什么是格式：rollup.js 中的“es”？

Question

我只是在这里浏览这个库(glide.js) ，因为我正在检查 package.json 文件，我在密钥下看到以下命令scripts：

 "build:esm": "rollup --config build/esm.js && rollup --config build/esm.modular.js",

这个脚本到底在做什么？我知道一个配置文件在这里被传递给 rollup.js，但是.esm? 当我看到dist/文件夹时，我也看到了一个glide.esm.js文件，这个文件到底在做什么？

esm 的构建配置文件如下所示：

import build from './build'

export default Object.assign(build, {
  input: 'entry/entry-complete.js',
  output: Object.assign(build.output, {
    file: 'dist/glide.esm.js',
    format: 'es'
  })
})

但我不太明白format: 'es'这里的真正含义。基本上分解一下，文件夹中的文件glide.js和glide.esm.js文件dist/夹中的文件有什么区别？

Answer 1

format: 'es'告诉 rollup 它应该以 ECMAScript 模块感知方式输出包。这意味着它应该创建一个可以import使用以下内容编辑的包：

import Glide from "some/place/glide/is/hosted/glide.js

如果使用此脚本的上下文不支持 ESM，您将收到语法错误。在这种情况下，使用 UMD 汇总包更有意义，因为它是最兼容的包版本。

深入解释 UMD 超出了这个问题的范围，但足以说明它使包能够与 AMD 和 CommonJS 感知加载器一起工作，以及使用包的导出填充全局命名空间。

此外，对于不明白ES模块，或者如果他们试图分析它们会抛出语法错误的浏览器，你可以包括一个备用脚本，将充分利用UMD或使用形式的脚本另一种格式的包：<script src="some/non/esm/script.js" nomodule="true" />这将告诉一个不应该运行链接脚本的ESM 感知上下文。

具体例子

考虑以下应该在 Firefox 和 Chrome 中工作的代码段，因为它们支持 ESM 模块。Stack Overflow 片段无法加载模块，因此您需要使用以下代码组合一个小项目：

演示.js

import Glide from "some/place/glide/is/hosted/glide.js

索引.html

import Glide from "https://unpkg.com/@glidejs/glide@3.2.3/dist/glide.esm.js";

new Glide(".glide").mount();