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

前言

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

TypeScript 配置 [​](#TypeScript 配置 "#typescript-configuration")

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

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

json 复制代码
// <rootDir>/tsconfig.json
{
  "extends": ".wxt/tsconfig.json",
}

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

ts 复制代码
/// <reference path="./.wxt/wxt.d.ts" />

编译器选项

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

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

TSConfig 路径 [​](#TSConfig 路径 "#tsconfig-paths")

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中。同时,它也会将别名添加到打包器中,以便解析导入。

ts 复制代码
import { resolve } from 'node:path';
export default defineConfig({
  alias: {
    // 目录:
    testing: resolve('utils/testing'),
    // 文件:
    strings: resolve('utils/strings.ts'),
  },
});
ts 复制代码
import { fakeTab } from 'testing/fake-objects';
import { toLowerCase } from 'strings';

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

相关推荐
蓝莓味的口香糖2 分钟前
【企业微信】VUE项目在企微中自定义转发内容
前端·vue.js·企业微信
IT_陈寒2 分钟前
告别低效!用这5个Python技巧让你的数据处理速度提升300% 🚀
前端·人工智能·后端
—Qeyser4 分钟前
Laravel + UniApp AES加密/解密
前端·uni-app·laravel
C++chaofan7 分钟前
游标查询在对话历史场景下的独特优势
java·前端·javascript·数据库·spring boot
cg.family9 分钟前
Vue3 v-slot 详解与示例
前端·javascript·vue.js
FreeBuf_23 分钟前
新型域名前置攻击利用Google Meet、YouTube、Chrome及GCP构建流量隧道
前端·chrome
c0detrend28 分钟前
技术架构设计:如何打造一个高性能的Chrome截图插件
前端·chrome
幽络源小助理34 分钟前
8、幽络源微服务项目实战:前端登录跨域同源策略处理+axios封装+权限的递归查询增删改+鉴权测试
前端·微服务·架构
API开发39 分钟前
apiSQL+GoView:一个API接口开发数据大屏
前端·后端·api·数据可视化·数据大屏·apisql
运维开发王义杰40 分钟前
nodejs:揭秘 npm 脚本参数 -- 的妙用与规范
前端·npm·node.js