如何将命名导出从与 Rollup 捆绑在一起的库导入到 HTML 页面？

Question

我对这应该如何工作的假设可能是不正确的，所以如果有人能告诉我在 Rollup 配置中更改什么或者我应该如何使用生成的包，我将不胜感激。

让我布景。我正在编写一个库，将它与 Rollup 捆绑在一起，然后想写一些 HTML 页面，我从该库导入一个命名导出。它一直告诉我它找不到指定的导出。

为了您的方便，我将问题归结为这个最小的例子：

我的项目文件夹中有以下文件：

min-example.js:

export function minExample(){
  return "can you find me?";
}

package.json:

{
  "name": "min-example",
  "version": "1.0.0",
  "description": "A minimal example of an issue with rollup",
  "scripts": {
    "build": "rollup -c"
  },
  "author": "nvcleemp",
  "license": "ISC",
  "devDependencies": {
    "rollup": "^2.58.0"
  }
}

rollup.config.js

export default [
  {
    input: "min-example.js",
    output: {
      file: `min-example.bundle.js`,
      name: "min-example",
      format: "umd"
    }
  }
];

如果我运行 npm run build，那么这将创建文件 min-example.bundle.js:

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
  typeof define === 'function' && define.amd ? define(['exports'], factory) :
  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["min-example"] = {}));
})(this, (function (exports) { 'use strict';

  function minExample(){
    return "can you find me?";
  }

  exports.minExample = minExample;

  Object.defineProperty(exports, '__esModule', { value: true });

}));

我原以为我可以按以下方式使用此文件：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Minimum example</title>
</head>

<body>
        <script type="module">
        import { minExample } from './min-example.bundle.js';

        console.log(minExample());
    </script>
</body>

</html>

正如我上面所说的，它抱怨找不到命名的导出 minExample。

请注意，它在不使用 Rollup 的情况下也能正常工作：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Minimum example</title>
</head>

<body>
        <script type="module">
        import { minExample } from './min-example.js';

        console.log(minExample());
    </script>
</body>

</html>

Answer 1

好的，多试几次就可以找到解决方案。显然输出格式应该是 es 而不是 umd，所以文件 rollup.config.js 必须更改为

export default [
  {
    input: "min-example.js",
    output: {
      file: `min-example.bundle.js`,
      name: "min-example",
      format: "es"
    }
  }
];

所以我确实误以为umd只是结合了es和cjs。

如何将命名导出从与 Rollup 捆绑在一起的库导入到 HTML 页面？

How do I import named exports from a library bundled with Rollup into a HTML page?

javascript

bundling-and-minification

rollupjs