WXT浏览器插件开发中文教程(11)----WXT配置详解之TypeScript 配置

前言

大家好，我是倔强青铜三。是一名热情的软件工程师，我热衷于分享和传播IT技术，致力于通过我的知识和技能推动技术交流与创新，欢迎关注我，微信公众号：倔强青铜三。欢迎点赞、收藏、关注，一键三连！！！

TypeScript 配置 ​

当你运行wxt prepare时，WXT会在你的项目根目录下生成一个基础的TSConfig文件，位于<rootDir>/.wxt/tsconfig.json。

至少，你需要在根目录下创建一个TSConfig，内容如下：

// <rootDir>/tsconfig.json
{
  "extends": ".wxt/tsconfig.json",
}

如果你处于一个单体仓库中，可能不希望扩展配置。如果不扩展配置，你需要将.wxt/wxt.d.ts添加到TypeScript项目中：

/// <reference path="./.wxt/wxt.d.ts" />

编译器选项 ​

要指定自定义编译器选项，请在<rootDir>/tsconfig.json中添加它们：

// <rootDir>/tsconfig.json
{
  "extends": ".wxt/tsconfig.json",
  "compilerOptions": {
    "jsx": "preserve",
  },
}

TSConfig 路径 ​

WXT提供了一组默认的路径别名。

别名	对应路径	示例
~~	<rootDir>/*	import "~~/scripts"
@@	<rootDir>/*	import "@@/scripts"
~	<srcDir>/*	import { toLowerCase } from "~/utils/strings"
@	<srcDir>/*	import { toLowerCase } from "@/utils/strings"

要添加自定义别名，请不要直接在tsconfig.json中添加！相反，使用wxt.config.ts中的alias选项。

这将在你下次运行wxt prepare时，将自定义别名添加到<rootDir>/.wxt/tsconfig.json中。同时，它也会将别名添加到打包器中，以便解析导入。

import { resolve } from 'node:path';
export default defineConfig({
  alias: {
    // 目录：
    testing: resolve('utils/testing'),
    // 文件：
    strings: resolve('utils/strings.ts'),
  },
});

import { fakeTab } from 'testing/fake-objects';
import { toLowerCase } from 'strings';

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