WXT浏览器插件开发中文教程(6)----WXT配置详解之自动导入

前言

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

自动导入

WXT 使用了与 Nuxt 相同的工具 unimport 来设置自动导入。

ts 复制代码
export default defineConfig({
  // 请参阅 [https://www.npmjs.com/package/unimport#configurations](https://www.npmjs.com/package/unimport#configurations)
  imports: {
    // ...
  },
});

默认情况下,WXT 会自动为自身的所有 API 以及项目中的某些目录设置自动导入:

  • <srcDir>/components/*
  • <srcDir>/composables/*
  • <srcDir>/hooks/*
  • <srcDir>/utils/*

这些目录中的文件的所有命名导出和默认导出都可以在项目中的其他地方直接使用,无需手动导入。

要查看完整的自动导入 API 列表,请运行 wxt prepare 命令,并查看项目中的 .wxt/types/imports-module.d.ts 文件。

TypeScript

为了让 TypeScript 和编辑器识别自动导入的变量,你需要运行 wxt prepare 命令。

将此命令添加到你的 postinstall 脚本中,以便在安装依赖项后,编辑器能够正确报告类型错误:

json 复制代码
// package.json
{
  "scripts": {
    "postinstall": "wxt prepare", 
  },
}

ESLint

除非在 ESLint 的 globals 中明确声明,否则 ESLint 无法识别自动导入的变量。默认情况下,如果 WXT 检测到项目中安装了 ESLint,它会自动生成配置文件。如果配置文件没有自动生成,你可以手动让 WXT 生成它。

ESLint 9 配置如下:

ts 复制代码
export default defineConfig({
  imports: {
    eslintrc: {
      enabled: 9,
    },
  },
});

ESLint 8配置如下:

ts 复制代码
export default defineConfig({
  imports: {
    eslintrc: {
      enabled: 8,
    },
  },
});

然后在你的 ESLint 配置文件中,导入并使用生成的文件:

ESLint 9 配置如下:

js 复制代码
// eslint.config.mjs
import autoImports from './.wxt/eslint-auto-imports.mjs';
export default [
  autoImports,
  {
    // 你的其他配置...
  },
];

ESLint 8 配置如下:

js 复制代码
// .eslintrc.mjs
export default {
  extends: ['./.wxt/eslintrc-auto-import.json'],
  // 你的其他配置...
};

禁用自动导入

并非所有开发人员都喜欢自动导入。要禁用自动导入,将 imports 设置为 false

ts 复制代码
export default defineConfig({
  imports: false, 
});

显式导入 (#imports)

你可以通过 #imports 模块手动导入 WXT 的所有 API:

ts 复制代码
import {
  createShadowRootUi,
  ContentScriptContext,
  MatchPattern,
} from '#imports';

要了解 #imports 模块的工作原理,请阅读 相关博客文章

如果你已经禁用了自动导入,仍然应该使用 #imports 从单一位置导入 WXT 的所有 API。

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

相关推荐
迷路的小绅士2 分钟前
常见网络安全攻击类型深度剖析(四):跨站脚本攻击(XSS)——分类、漏洞利用与前端安全防护
前端·安全·web安全
小希爸爸11 分钟前
3、中医基础入门和养生
前端·javascript·后端
摆烂工程师28 分钟前
ChatGPT免费用户可以使用Deep Research啦!并且o3、o4-mini的可使用次数翻倍!
前端·后端·程序员
狂炫一碗大米饭29 分钟前
作为前端你不得不知道的浏览器相关知识1🚀
前端
天天扭码36 分钟前
🔥 别再用 class 了!JS 原型链才是 YYDS
前端·javascript·面试
GISer_Jinger41 分钟前
📢《告别手动抓狂!Trae国际版+BrowserTools MCP 实现前端错误调试自动化》🚀
前端
前端大白话42 分钟前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
一天睡25小时42 分钟前
React与Vue表单的对比差异
前端·javascript
作曲家种太阳42 分钟前
第七章 响应式的 watch 实现【手摸手带你实现一个vue3】
前端
在澳门喝茶的芦竹44 分钟前
React高阶组件——React.momo
javascript·react.js