如何处理浏览器中依赖项的 ESM 依赖项（没有 UMD）？答案

【问题标题】：How do I handle ESM dependencies of dependencies in the browser (without UMD)?如何处理浏览器中依赖项的 ESM 依赖项（没有 UMD）？
【发布时间】：2020-04-27 11:05:08
【问题描述】：

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

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

然后我尝试加载喜欢

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

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

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

【问题讨论】：

标签： javascript es6-module-loader

【解决方案1】：

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

Rollup 可以捆绑此模块并输出单个 Javascript 文件。使用output.format: 'es' 会创建一个看起来不难看的模块文件。
您可以使用 HTTPS URL 从Pika CDN 导入模块。

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：