自动导入

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

export default defineConfig({
  // 见 https://www.npmjs.com/package/unimport#configurations
  imports: {
    // ...
  },
});

默认情况下，WXT 自动为它的所有 API 设置了自动导入：

• browser 从 wxt/browser
• defineContentScript 从 wxt/sandbox
• defineBackground 从 wxt/sandbox
• defineUnlistedScript 从 wxt/sandbox
• createIntegratedUi 从 wxt/client
• createShadowRootUi 从 wxt/client
• createIframeUi 从 wxt/client
• fakeBrowser 从 wxt/testing
• 并更多！

WXT 还会自动将一些项目目录作为自动导入源：

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

这些目录中的所有命名导出和默认导出都在项目中其他地方可用，无需手动导入。

TypeScript

为了使 TypeScript 和您的编辑器识别自动导入的变量，请运行 wxt prepare 命令。

将此命令添加到您的 postinstall 脚本中，以便在安装依赖后，编辑器可以报告类型错误：

// package.json
{
  "scripts": {
    "postinstall": "wxt prepare", 
  },
}

ESLint

除非显式定义在 ESLint 的 globals 中，否则 ESLint 不知道自动导入的变量。默认情况下，WXT 会检测到您的项目中安装了 ESLint，并会生成配置文件。如果未自动生成配置文件，则可以手动告诉 WXT 生成它。

ESLint 9

export default defineConfig({
  imports: {
    eslintrc: {
      enabled: 9,
    },
  },
});

ESLint 8

export default defineConfig({
  imports: {
    eslintrc: {
      enabled: 8,
    },
  },
});

然后在您的 ESLint 配置中导入并使用生成的文件：

ESLint 9

// eslint.config.mjs
import autoImports from './.wxt/eslint-auto-imports.mjs';

export default [
  autoImports,
  {
    // 其他您的配置...
  },
];

ESLint 8

// .eslintrc.mjs
export default {
  extends: ['./.wxt/eslintrc-auto-import.json'],
  // 其他您的配置...
};

关闭自动导入

并非所有开发者喜欢自动导入。要关闭它们，将 imports 设置为 false。

export default defineConfig({
  imports: false, 
});