如何从与 Rollup 捆绑的库中导入命名导出到 HTML 页面？

Question

I'm probably just incorrect about my assumptions of how this should work, so I would appreciate it if somebody can either tell me what to change in my Rollup config or how I should use the resulting bundle.我对这应该如何工作的假设可能只是不正确，所以如果有人能告诉我在我的 Rollup 配置中更改什么或我应该如何使用生成的包，我将不胜感激。

Let me set the scene.让我来布景。 I'm writing a library, bundling it with Rollup, and then want to write some HTML page where I import a named export from that libray.我正在编写一个库，将它与 Rollup 捆绑在一起，然后想编写一些 HTML 页面，在其中我从该库中导入一个命名导出。 It keeps telling me that it can't find the named export.它一直告诉我它找不到命名的导出。

For your convenience, I have boiled the issue down to this minimal example:为了您的方便，我将问题归结为这个最小的例子：

I have The following files in my project folder:我的项目文件夹中有以下文件：

min-example.js : min-example.js ：

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

package.json : 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"
    }
  }
];

If I run npm run build , then this creates the file min-example.bundle.js :如果我运行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 });

}));

I would have expected that I could use this file in the following manner:我原以为可以通过以下方式使用此文件：

<!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>

As I said above however, this complains that it can't find the named export minExample .然而，正如我上面所说，这抱怨它找不到命名的 export minExample 。

Note that it does work without using Rollup:请注意，它确实可以在不使用 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

OK, a bit more trial-and-error let to a solution.好的，多一点试错让解决方案。 Apparently the output format should be es instead of umd , so the file rollup.config.js had to be changed to显然输出格式应该是es而不是umd ，因此文件rollup.config.js必须更改为

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

So I was indeed under the false impression that umd just combined es and cjs .所以我确实有一种错误的印象，即umd只是结合了es和cjs 。

如何从与 Rollup 捆绑的库中导入命名导出到 HTML 页面？

问题描述

1 个解决方案

解决方案1
0 已采纳 2021-10-15 05:55:36

如何从与 Rollup 捆绑的库中导入命名导出到 HTML 页面？

问题描述

1 个解决方案

解决方案1 0 已采纳 2021-10-15 05:55:36

解决方案1
0 已采纳 2021-10-15 05:55:36