Electron Unplugin-auto-expose 사용 메뉴얼

Unplugin-auto-expose 사용 메뉴얼

unplugin-auto-expose는 Electron 애플리케이션에서 preload 스크립트를 통해 renderer 프로세스에 API를 쉽게 노출시킬 수 있게 해주는 플러그인입니다. 이 문서는 unplugin-auto-expose의 기본 사용법, 설정 방법 및 TypeScript 설정 방법을 안내합니다.

기본 사용 예시

preload.ts 예시:

// preload.ts
export const foo = 'foo string'
// 동등한 기존 방식
electron.contextBridge.exposeInMainWorld('__electron_preload_foo', 'foo string')

renderer.ts 예시:

// renderer.ts
import {foo} from '#preload'
// 동등한 기존 방식
const foo = window.__electron_preload_foo

모든 Export 선언 지원

// 이름이 있는 export 선언
export const prop = 1
export function method() {}

// 이름이 있는 재-export
export {prop} from 'file'
export {prop as propAlias} from 'file'

// 모든 선언 export
export * from 'file'
export * as props from 'file'

// 기본 export
export default 'foo'

설정 방법

이 패키지는 preload와 renderer 빌드용으로 두 가지 플러그인을 포함하고 있습니다.

preload/vite.config.ts 설정 예시:

import {preload} from 'unplugin-auto-expose';

export default defineConfig({
  plugins: [
    preload.vite()
  ]
})

renderer/vite.config.ts 설정 예시:

import {renderer} from 'unplugin-auto-expose';

export default defineConfig({
  plugins: [
    renderer.vite({
      preloadEntry: '/절대/경로/to/preload.ts'
    })
  ]
})

TypeScript 설정

renderer의 TypeScript 설정을 위해, tsconfig.json에 preload 경로를 추가합니다.

{
  "compilerOptions": {
    "paths": {
      "#preload": [
        "/경로/to/preload"
      ]
    }
  }
}

요약

unplugin-auto-expose를 사용하면 Electron의 preload 스크립트에서 노출한 API를 renderer 프로세스에서 쉽게 임포트하여 사용할 수 있습니다. 이를 통해 contextBridge를 직접 관리하는 번거로움 없이 보안과 모듈화를 유지하면서 개발을 진행할 수 있습니다. 설정은 각각의 vite.config.ts 파일에 플러그인을 추가하는 것으로 간단하게 완료할 수 있으며, TypeScript 환경에서도 쉽게 통합할 수 있습니다.