什么是 .esm.js 文件，格式是什么：rollup.js 中的“es”？
Posted
技术标签:
【中文标题】什么是 .esm.js 文件，格式是什么：rollup.js 中的“es”？【英文标题】：what are .esm.js files and whats with the format: 'es' in rollup.js? 【发布时间】：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 文件有什么区别？
【问题讨论】：
【参考方案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 中回答类似的问题并不是评论的真正目的。以上是关于什么是 .esm.js 文件，格式是什么：rollup.js 中的“es”？的主要内容，如果未能解决你的问题，请参考以下文章
log4cplus dailyrollingfileappender为啥生成很多文件