TypeScript 설정

wxt prepare를 실행하면 WXT는 프로젝트 루트 디렉토리(<rootDir>/.wxt/tsconfig.json)에 기본 TSConfig 파일을 생성합니다.

최소한으로, 루트 디렉토리에 다음과 같은 TSConfig 파일을 생성해야 합니다:

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

만약 모노레포를 사용 중이라면, 이 설정을 확장하지 않을 수도 있습니다. 확장하지 않을 경우, TypeScript 프로젝트에 .wxt/wxt.d.ts를 추가해야 합니다:

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

컴파일러 옵션

커스텀 컴파일러 옵션을 지정하려면 <rootDir>/tsconfig.json 파일에 추가하세요:

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

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에 추가됩니다. 또한 번들러가 임포트를 해결할 수 있도록 별칭도 추가됩니다.

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';