什么是.esm.js文件和什么格式：rollup.js中的'es'？
[英]what are .esm.js files and whats with the format: 'es' in rollup.js?
问题描述
I was just going through this library HERE (glide.js) , as i was checking the package.json file i see the following command under the key scripts : 
我只是通过这个库去这里 （glide.js），因为我是检查的package.json文件，我看到下方的按键下面的命令scripts ：
"build:esm": "rollup --config build/esm.js && rollup --config build/esm.modular.js",
What exactly is this script doing ? 这个脚本到底在做什么？ I know aa config file is being passed to rollup.js here, but whats with the .esm ? 我知道配置文件正在传递给rollup.js，但是.esm什么？ when i see the dist/ folder i also see a glide.esm.js file , what exactly is this file doing ? 当我看到dist /文件夹时我也看到了一个glide.esm.js文件，这个文件到底在做什么？
The build config file for esm looks like below: 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'
})
})
But i don't quite understand what the format: 'es' really means here. 但我不太明白format: 'es'是什么format: 'es'在这里真正意味着什么。 Basically to break it down , what is the difference between the glide.js and the glide.esm.js file in the dist/ folder ? 基本上打破它， glide.js和dist/文件夹中的glide.esm.js文件有什么区别？
1 个解决方案
解决方案1
4 已采纳 2018-08-15 17:18:06
format: 'es' tells rollup that it should output the bundle in an ECMAScript Module aware way. format: 'es'告诉汇总它应该以ECMAScript模块识别方式输出包。 This means that it should create a bundle that can be import ed using something along the lines of: 这意味着它应该创建一个可以使用以下内容import的包：
import Glide from "some/place/glide/is/hosted/glide.js
If the context that this script is used in is not ESM aware, you will get syntax errors. 如果使用此脚本的上下文不支持ESM，则会出现语法错误。 In that case, it makes more sense to use a UMD rollup bundle because it is the most compatible version of the bundle. 在这种情况下，使用UMD汇总捆绑包更有意义，因为它是捆绑包的最兼容版本。
Explaining UMD in depth is beyond the scope of this question, but suffice it to say that it makes the bundle able to work with AMD and CommonJS aware loaders as well as populating a global namespace with the bundle's exports. 深入解释UMD超出了这个问题的范围，但足以说它使得捆绑包能够与AMD和CommonJS感知加载器一起工作，以及使用bundle的导出填充全局命名空间。
Additionally, for browsers that do not understand what ES modules are or would throw syntax errors if they tried to parse them, you can include a fallback script that would leverage the UMD or bundle of another format using a script of form: <script src="some/non/esm/script.js" nomodule="true" /> which would tell an ESM aware context that it shouldn't run the linked script. 此外，对于不了解ES模块的浏览器或者如果他们试图解析它们会引发语法错误的浏览器，您可以包含一个回退脚本，该脚本将使用形式的脚本利用UMD或另一种格式的包： <script src="some/non/esm/script.js" nomodule="true" />这将告诉ESM意识上下文它不应该运行链接脚本。
Concrete Example 具体例子
Consider the following snippet which should work in Firefox and Chrome since they support ESM modules. 请考虑以下代码段，它应该适用于Firefox和Chrome，因为它们支持ESM模块。 Stack Overflow snippets do not have a way to load modules so you will need to put together a small project using the following code: Stack Overflow片段没有办法加载模块，因此您需要使用以下代码组合一个小项目：
demo.js demo.js
import Glide from "https://unpkg.com/@glidejs/glide@3.2.3/dist/glide.esm.js";
new Glide(".glide").mount();
index.html 的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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.