什么是.esm.js文件和什么格式：rollup.js中的'es'？

Question

我只是通過這個庫去這里（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'是什么format: 'es'在這里真正意味着什么。 基本上打破它， glide.js和dist/文件夾中的glide.esm.js文件有什么區別？

Answer 1

format: 'es'告訴匯總它應該以ECMAScript模塊識別方式輸出包。 這意味着它應該創建一個可以使用以下內容import的包：

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

如果使用此腳本的上下文不支持ESM，則會出現語法錯誤。 在這種情況下，使用UMD匯總捆綁包更有意義，因為它是捆綁包的最兼容版本。

深入解釋UMD超出了這個問題的范圍，但足以說它使得捆綁包能夠與AMD和CommonJS感知加載器一起工作，以及使用bundle的導出填充全局命名空間。

此外，對於不了解ES模塊的瀏覽器或者如果他們試圖解析它們會引發語法錯誤的瀏覽器，您可以包含一個回退腳本，該腳本將使用形式的腳本利用UMD或另一種格式的包： <script src="some/non/esm/script.js" nomodule="true" />這將告訴ESM意識上下文它不應該運行鏈接腳本。

具體例子

請考慮以下代碼段，它應該適用於Firefox和Chrome，因為它們支持ESM模塊。 Stack Overflow片段沒有辦法加載模塊，因此您需要使用以下代碼組合一個小項目：

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>

什么是.esm.js文件和什么格式：rollup.js中的'es'？

問題描述

1 個解決方案

解決方案1
4 已采納 2018-08-15 17:18:06

具體例子

demo.js

的index.html

什么是.esm.js文件和什么格式：rollup.js中的'es'？

問題描述

1 個解決方案

解決方案1 4 已采納 2018-08-15 17:18:06

具體例子

demo.js

的index.html

解決方案1
4 已采納 2018-08-15 17:18:06