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。

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

相关推荐
lee5762 小时前
老是忘记package.json,备忘一下 webpack 环境下 Vue Cli 和 Vite 命令行工具对比
vue.js
喝拿铁写前端3 小时前
前端与 AI 结合的 10 个可能路径图谱
前端·人工智能
codingandsleeping3 小时前
浏览器的缓存机制
前端·后端
-代号95274 小时前
【JavaScript】十二、定时器
开发语言·javascript·ecmascript
灵感__idea5 小时前
JavaScript高级程序设计(第5版):扎实的基本功是唯一捷径
前端·javascript·程序员
摇滚侠5 小时前
Vue3 其它API toRow和markRow
前端·javascript
難釋懷5 小时前
JavaScript基础-history 对象
开发语言·前端·javascript
beibeibeiooo5 小时前
【CSS3】04-标准流 + 浮动 + flex布局
前端·html·css3
拉不动的猪5 小时前
刷刷题47(react常规面试题2)
前端·javascript·面试
浪遏5 小时前
场景题:大文件上传 ?| 过总字节一面😱
前端·javascript·面试