如何处理浏览器中依赖的ESM依赖（不带UMD）？

Question

我有一个项目可以汇总到一个文件中。 最终文件看起来像这样......

import {SomeClass} from "another-lib";
export class Thing{
  ...
}

然后我尝试加载

<script type="module" src="myHostedVersion.mjs">

然后我遇到的问题是因为当我尝试将它加载到浏览器中时我没有使用预编译器，它抱怨需要以./ or /开头。

所以问题是，如何从浏览器正确加载它（假设我托管 MJS）？ 我必须使用汇总重写路径还是有更清洁的选项？ 我目前通过加载到窗口来解决。

Answer 1

我的答案是要么创建一个带有解析插件的“胖”UMD js 文件用于汇总（丑陋），要么只导入项目，因为它附加到窗口我可以通过这种方式访问​​它。 然后我只是进行空检查以确保它在窗口上。

Answer 2

浏览器无法解析不是“another-lib”等相对路径的模块名称。 有几种不同的解决方法：

1. Rollup 可以捆绑这个模块并输出单个 Javascript 文件。 使用output.format: 'es'将创建一个看起来不难看的模块文件。

2. 您可以使用 HTTPS URL 从Pika CDN导入模块。

import {SomeClass} from "https://cdn.pika.dev/another-lib";
export class Thing{
  ...
}

3. 您可以使用Snowpack 之类的工具为您的外部模块创建其他文件。

import {SomeClass} from "../web_modules/another-lib.js";
export class Thing{
  ...
}