什么是 .esm.js 文件以及格式是什么：'es' in rollup.js？

Question

我刚刚浏览了这个库 HERE (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 和 dist/ 文件夹中的 glide.esm.js 文件有什么区别？

Answer 1

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

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

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

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

此外，对于不了解什么是 ES 模块或在尝试解析它们时会抛出语法错误的浏览器，您可以包含一个后备脚本，该脚本将利用 UMD 或使用 form 脚本的另一种格式的捆绑包: <script src="some/non/esm/script.js" nomodule="true" /> 这将告诉 ESM 感知上下文它 不应该 运行链接脚本。

具体示例

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

demo.js

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

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

index.html

<!DOCTYPE html>

<html lang="en">

<head>
  <title>Module Demo</title>
  <link rel="stylesheet" href="https://unpkg.com/@glidejs/glide@3.2.3/dist/css/glide.core.min.css" />
  <link rel="stylesheet" href="https://unpkg.com/@glidejs/glide@3.2.3/dist/css/glide.theme.min.css" />
  <script type="module" src="demo.js"></script>
</head>

<body>
  <main>
    <div class="glide">
      <div data-glide-el="track" class="glide__track">
        <ul class="glide__slides">
          <li class="glide__slide">Foo</li>
          <li class="glide__slide">Bar</li>
          <li class="glide__slide">Fizz</li>
        </ul>
      </div>
    </div>
  </main>
</body>

</html>

什么是 .esm.js 文件以及格式是什么：'es' in rollup.js？

what are .esm.js files and whats with the format: 'es' in rollup.js?

javascript

ecmascript-6

rollupjs

具体示例

demo.js

index.html