首页 > 编程语言> > javascript-什么是.esm.js文件,并且在rollup.js中格式为：“ es”？

javascript-什么是.esm.js文件,并且在rollup.js中格式为：“ es”？

2019-10-25 02:37:02 作者：互联网

我刚刚浏览了这个库HERE(glide.js),因为我正在检查package.json文件,所以我在关键脚本下看到以下命令：

 "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'
  })
})

但是我不太明白格式是什么：“ es”在这里真的意味着什么.基本上是为了分解它,dist /文件夹中的glide.js和glide.esm.js文件有什么区别？

解决方法:

格式：“ es”告诉汇总,它应该以ECMAScript模块感知的方式输出分发包.这意味着它应该创建一个可以通过以下方式导入的包：

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

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

深入解释UMD超出了此问题的范围,但可以说,它使捆绑软件能够与AMD和CommonJS感知的加载程序一起使用,并能够使用捆绑软件的导出来填充全局名称空间.

此外,对于不了解什么是ES模块或如果尝试解析它们会抛出语法错误的浏览器,您可以包括一个后备脚本,该脚本将使用格式为< script src的脚本来利用UMD或另一种格式的软件包. =“ some / non / esm / script.js” nomodule =“ true” />这将告诉ESM感知上下文,它不应运行链接脚本.

具体例子

考虑以下代码段,由于它们支持ESM模块,因此它们应在Firefox和Chrome中运行.堆栈溢出片段无法加载模块,因此您需要使用以下代码将一个小型项目放在一起：

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>

标签：rollupjs,ecmascript-6,javascript
来源： https://codeday.me/bug/20191025/1925352.html