前言
大家好,我是倔强青铜三 。是一名热情的软件工程师,我热衷于分享和传播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。
最后感谢阅读!欢迎关注我,微信公众号 :
倔强青铜三
。欢迎点赞
、收藏
、关注
,一键三连!!!