代码之家 › 专栏 › 技术社区 › Alexander Solonik

什么是.esm.js文件以及rollup.js中格式为“es”的文件?

rollupjs ecmascript-6 javascript

Alexander Solonik · 技术社区 · 8 年前

我只是在浏览这个图书馆 HERE (glide.js),当我检查package.json文件时,在键下看到以下命令 scripts :

 "build:esm": "rollup --config build/esm.js && rollup --config build/esm.modular.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/ 文件夹?

1 回复 | 直到 8 年前

zero298 8 年前

format: 'es' 告诉rollup它应该以ECMAScript模块感知的方式输出包。这意味着它应该创建一个可以 import 埃德用了一些类似于:

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

深入地解释UMD超出了这个问题的范围,但可以说它使bundle能够与AMD和CommonJS感知的加载程序一起工作,并使用bundle的导出填充全局名称空间。

<script src="some/non/esm/script.js" nomodule="true" /> 这将告诉ESM感知上下文 不应该

具体实例

应该

演示.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>

推荐文章

Shibaji Biswas · 如何在Template literal的双引号内的html div id中编写JavaScript变量?

1 年前

GulgDev · 为什么不将属性设置为无效值?

1 年前

Koffee · 动画继续使用update()重新启动,而不是在Phaser 3中正常播放

2 年前

Monnt · 如何查看数组是否包括具有特定值的嵌套数组?

2 年前

JsCoder · 用ECDSA对C语言中的数据进行加密#

2 年前

dsi · 排序功能可实现多列的自定义差异

2 年前

huz3y · 如何在JavaScript中基于另一个变量值构建变量?如何重新分配它的值并对该变量执行方法?复制

2 年前

Darigan · clearTimeout将一个函数中的计时器与另一个函数(React.js)一起超时

2 年前

Joseph · 仅在React和JS中生成深色

2 年前

Joseph · 在Javascript中检索一些文本

2 年前