자동 임포트

WXT는 Nuxt와 동일한 도구인 unimport를 사용하여 자동 임포트를 설정합니다.

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

기본적으로 WXT는 자체 API에 대한 자동 임포트를 자동으로 설정합니다:

wxt/browser의 browser
wxt/sandbox의 defineContentScript
wxt/sandbox의 defineBackground
wxt/sandbox의 defineUnlistedScript
wxt/client의 createIntegratedUi
wxt/client의 createShadowRootUi
wxt/client의 createIframeUi
wxt/testing의 fakeBrowser
그리고 더 많은 것들!

WXT는 또한 프로젝트 디렉토리를 자동 임포트 소스로 자동 추가합니다:

<srcDir>/components/*
<srcDir>/composables/*
<srcDir>/hooks/*
<srcDir>/utils/*

이 디렉토리에 있는 파일의 모든 명명된 내보내기와 기본 내보내기는 프로젝트의 다른 곳에서 임포트 없이 사용할 수 있습니다.

TypeScript

TypeScript와 여러분의 편집기가 자동으로 가져온 변수를 인식하려면 wxt prepare 커맨드를 실행해야 합니다.

의존성을 설치한 후 편집기가 타입 오류를 보고할 수 있도록 이 커맨드를 postinstall 스크립트에 추가하세요:

jsonc

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

ESLint

ESLint는 자동으로 가져온 변수를 인식하지 못합니다. 이 변수들은 ESLint의 globals에 명시적으로 정의되어야 합니다. 기본적으로 WXT는 프로젝트에 ESLint가 설치된 것을 감지하면 설정 파일을 자동으로 생성합니다. 만약 설정 파일이 자동으로 생성되지 않는다면, WXT에게 수동으로 생성하도록 지시할 수 있습니다.

ESLint 9ESLint 8

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

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

그런 다음 ESLint 설정 파일에서 생성된 파일을 가져와 사용합니다:

ESLint 9ESLint 8

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

export default [
  autoImports,
  {
    // 나머지 설정...
  },
];

// .eslintrc.mjs
export default {
  extends: ['./.wxt/eslintrc-auto-import.json'],
  // 나머지 설정...
};