WXT浏览器插件开发中文教程(24)----ES 模块支持

前言

大家好,我是倔强青铜三 。是一名热情的软件工程师,我热衷于分享和传播IT技术,致力于通过我的知识和技能推动技术交流与创新,欢迎关注我,微信公众号:倔强青铜三。欢迎点赞、收藏、关注,一键三连!!!

ES 模块 [​](#ES 模块 "#es-modules")

您的源代码应始终以 ES 模块的形式编写。不过,您可以选择是否将入口点打包为 ES 模块。

HTML页面

Vite 仅支持从 HTML 页面打包 JavaScript 为 ES 模块。请确保您的 <script> 标签中添加了 type="module"

html 复制代码
- <script src="./main.ts"></script> 
+ <script src="./main.ts" type="module"></script> 

背景脚本

默认情况下,背景脚本将被打包为单个文件的 IIFE。您可以通过在背景入口点中设置 type: "module" 来更改此行为:

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

这将把输出格式改为 ES 模块,启用背景脚本和 HTML 页面之间的代码分割,并在清单文件中设置 "type": "module"

警告

仅 MV3 支持 ES 模块背景脚本/服务工作线程。当目标为 MV2 时,type 选项将被忽略,背景脚本始终被打包为单个文件的 IIFE。

内容脚本

WXT 尚未内置支持将内容脚本打包为 ES 模块。计划是添加对代码块的支持以减小打包体积,但暂时不支持 HMR。由于存在一些技术问题,实现 HMR 的通用解决方案是不可能的。详情请参阅 Content Script ESM Support #357

如果您无法等待,需要立即使用 ES 模块支持,您可以手动实现 ES 模块支持。请参阅 ESM Content Script UI 示例以了解如何操作。

最后感谢阅读!欢迎关注我,微信公众号倔强青铜三。欢迎点赞收藏关注,一键三连!!!

相关推荐
李长渊哦3 小时前
深入理解 JavaScript 中的全局对象与 JSON 序列化
开发语言·javascript·json
Senar5 小时前
如何判断浏览器是否开启硬件加速
前端·javascript·数据可视化
HtwHUAT6 小时前
实验四 Java图形界面与事件处理
开发语言·前端·python
利刃之灵6 小时前
01-初识前端
前端
codingandsleeping6 小时前
一个简易版无缝轮播图的实现思路
前端·javascript·css
天天扭码6 小时前
一分钟解决 | 高频面试算法题——最大子数组之和
前端·算法·面试
全宝6 小时前
🌏【cesium系列】01.vue3+vite集成Cesium
前端·gis·cesium
拉不动的猪7 小时前
简单回顾下插槽透传
前端·javascript·面试
烛阴7 小时前
Fragment Shader--一行代码让屏幕瞬间变黄
前端·webgl
爱吃鱼的锅包肉7 小时前
Flutter路由模块化管理方案
前端·javascript·flutter