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

【问题标题】：what are .esm.js files and whats with the format: 'es' in rollup.js?什么是 .esm.js 文件，格式是什么：rollup.js 中的“es”？
【发布时间】：2019-01-22 13:56:57
【问题描述】：

我刚刚浏览了这个库 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 文件有什么区别？

【问题讨论】：

标签： javascript ecmascript-6 rollupjs

【解决方案1】：

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

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

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

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

此外，对于不理解 ES 模块是什么的浏览器，或者在尝试解析它们时会抛出语法错误的浏览器，您可以包含一个备用脚本，该脚本将利用 UMD 或使用以下格式的脚本的另一种格式的捆绑：@ 987654326@ 将告诉 ESM 感知上下文它不应运行链接脚本。

具体例子

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

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>

【讨论】：

所以您发布的代码 sn-p 在 FF 和 chrome 中有效，但在其他旧版浏览器中无效，我相信，从理论上讲..
@AlexanderSolonik 正确，旧浏览器不知道<script type="module"/> 是什么意思。请参阅MDN's documentation on script elements。旧版浏览器会忽略该脚本，因为type 既没有省略也没有 JavaScript mime。请参阅我关于在这种情况下使用 nomodule="true" 拥有后备脚本的编辑。
谢谢兄弟！！
你有什么想法吗，你会如何调试一个这样的插件编写和拆分在这里的模块::-github.com/glidejs/glide/tree/master/src？如果你能给我一个大致的想法......谢谢！
@AlexanderSolonik 脚本仍然会像普通的 JS 文件一样运行；它们仍会出现在您使用的任何浏览器的开发者控制台的“脚本”选项卡中。不同之处在于它们的加载方式。您可能希望将上一条评论作为新问题打开，并尽可能多地添加细节。描述您认为尝试调试的问题是什么，您如何尝试解决这些问题等。在 cmets 中回答类似的问题并不是评论的真正目的。