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。

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

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

前言

自动导入

TypeScript

ESLint

禁用自动导入

显式导入 (#imports)

显式导入 (`#imports`)