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。

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

相关推荐
猫和老许3 分钟前
Vue 3 拖拽排序功能优化实现:从原理到实战应用
前端·javascript·vue.js
YGY_Webgis糕手之路6 分钟前
Leaflet 综合案例 - 路径规划
前端·gis
sq8006 分钟前
ag-grid-vue3 降级,支持低版本浏览器
前端·javascript·vue.js
前端灵派派7 分钟前
cesium 实现轨迹回放
前端·cesium
水纹7 分钟前
继续研究pdfjs保存和还原批注
前端
兔年鸿运Q小Q8 分钟前
html转word下载
javascript·vue.js·word
程序员海军8 分钟前
使用 Kiro AI IDE 3小时实现全栈应用Admin系统
前端·后端·aigc
你这个年龄怎么睡得着的12 分钟前
玩转vite性能优化
前端·vue.js·vite
YGY_Webgis糕手之路12 分钟前
OpenLayers 综合案例-热力图
前端·gis
小阿鑫15 分钟前
使用 Kiro AI IDE 3小时实现全栈应用Admin系统
前端·后端·python·admin·kiro·next admin·fastapi admin