通常，当您以传统方式导入脚本时，您会执行以下操作：
<script src="https://jsdeliver.com/packagename"></script>
当你导入一个 ES 模块时，你会这样做：
<script>
import { method } from "https://jsdeliver.com/packagename"
...
</script>
我想知道是否有一种方法可以编写一次 JS 库，这样它就会自动以两种方式加载。如果您import，它将作为 ES 模块加载，如果您将其包含为 <script src>，它将作为传统脚本加载。
【问题讨论】：
标签： javascript ecmascript-6 es6-modules
是和否。
您可以编写一个 ESM 模块，该模块既可以使用 import 从其他 ESM 模块加载，也可以从 <script> 标签加载。但是，为此，您必须在脚本标记中使用 type="module" 属性，如下所示：
<script type="module" src="https://jsdeliver.com/packagename"></script>
这告诉浏览器这是一个 Javascript 模块脚本，而不是老式的普通浏览器脚本。
您不能拥有既是模块又是传统浏览器脚本的脚本，因为像您展示的 ESM 模块脚本具有导出，而您不能在传统的普通浏览器脚本中拥有这些脚本。
因此，您必须将脚本设为 ESM 脚本，然后在 <script> 标记中使用适当的修饰符，以便浏览器正确加载 ESM 脚本。
注意，您显示的情况不会很常见，因为这行代码：
import { method } from "https://jsdeliver.com/packagename"
暗示此模块的主要目的是提供导出的功能，但通过<script> 标签加载它不会提供这些导出。因此，当以两种不同的方式加载时，脚本必须有两个不同的目的。可行，但也许不是你应该如何做事。也许您会改为将通用的共享代码放入可以共享的自己的 ESM 模块中，然后让顶级模块服务于 <script> 标记与您从中导入方法的脚本的不同目的。
【讨论】：
Accept标头来区分这些？