在 script 标签上支持原生 ESM 和 原生 ESM 动态导入

在HTML中，`<script>`标签通常用于加载JavaScript脚本文件。然而，ESM (EcmaScript Modules) 是一种模块化的JavaScript语法，它从ES6开始引入，用于组织和导入大型应用中的代码。原生ESM并不是直接内置在`<script>`标签里的，因为浏览器对ESM的支持需要通过某些工具或策略。

如果你想要在`<script>`标签上支持原生ESM并动态导入模块，你需要使用一些现代浏览器支持的技术，例如：

1. **Dynamic Import()**：这是JavaScript原生提供的功能，允许你在运行时异步加载模块。你可以像下面这样在`<script>`标签内使用：

<script type="module">
  import('path/to/module.js')
    .then((importedModule) => {
      // 使用 importedModule
    })
    .catch((error) => {
      // 处理错误
    });
</script>

2. **Webpack、Rollup等构建工具**：它们可以将ESM转换成浏览器可以直接使用的CommonJS格式，然后在`<script>`标签里引用打包后的文件。

3. **Babel 或 TypeScript 编译**：如果浏览器不直接支持ESM，你可以先使用Babel或TypeScript将ESM代码转译成兼容的版本，然后再加载。

需要注意的是，并非所有浏览器都支持原生的ESM，特别是对于旧版浏览器，可能需要借助polyfill或者其他方案来模拟这种行为。同时，由于`<script>`标签默认是非阻塞的，所以动态导入会异步进行，不会阻塞页面渲染。