Skip to content

ES 模块

你的源代码应始终以 ESM(ES Modules)方式编写。不过,你可以控制入口文件是否以 ESM 方式打包。

HTML 页面 ≥0.0.1

Vite 仅支持将 HTML 页面中的 JS 以 ESM 方式打包。请确保你的 <script> 标签添加了 type="module"

html
<script src="./main.ts"></script> 
<script src="./main.ts" type="module"></script> 

后台脚本 ≥0.16.0

默认情况下,你的后台脚本会被打包为单个 IIFE 文件。你可以通过在后台入口文件中设置 type: "module" 来更改这一点:

ts
export default defineBackground({
  type: 'module', 
  main() {
    // ...
  },
});

这将把输出格式更改为 ESM,允许后台脚本与 HTML 页面之间进行代码分割,并在 manifest 中设置 "type": "module"

WARNING

只有 MV3 支持 ESM 后台脚本/Service Worker。如果目标为 MV2,则 type 选项会被忽略,后台始终会被打包为单个 IIFE 文件。

内容脚本

WXT 目前还不支持将内容脚本内置打包为 ESM。后续计划会支持 chunk 拆分以减小包体积,但暂不支持 HMR。由于存在多项技术难题,目前无法实现通用的 HMR 方案。详情可见 Content Script ESM Support #357

如果你迫切需要 ESM 支持,可以手动实现。参考 ESM Content Script UI 示例了解如何操作。