Bun 은 내부 트랜스파일러를 Bun.Transpiler 클래스를 통해 노출합니다. Bun 의 트랜스파일러 인스턴스를 생성하려면:

const transpiler = new Bun.Transpiler({
  loader: "tsx", // "js | "jsx" | "ts" | "tsx"
});

---

.transformSync()

.transformSync() 메서드로 코드를 동기적으로 트랜스파일합니다. 모듈은 해결되지 않으며 코드는 실행되지 않습니다. 결과는 일반 JavaScript 코드의 문자열입니다.

const transpiler = new Bun.Transpiler({
  loader: 'tsx',
});

const code = `
import * as whatever from "./whatever.ts"
export function Home(props: {title: string}){
  return <p>{props.title}</p>;
}`;

const result = transpiler.transformSync(code);

import { __require as require } from "bun:wrap";
import * as JSX from "react/jsx-dev-runtime";
var jsx = require(JSX).jsxDEV;

export default jsx(
  "div",
  {
    children: "hi!",
  },
  undefined,
  false,
  undefined,
  this,
);

new Bun.Transpiler() 생성자에서 지정된 기본 로더를 재정의하려면 .transformSync() 에 두 번째 인수를 전달하세요.

transpiler.transformSync("<div>hi!</div>", "tsx");

세부 사항">

.transformSync 가 호출되면 트랜스파일러는 현재 실행된 코드와 동일한 스레드에서 실행됩니다.

매크로를 사용하면 매크로는 트랜스파일러와 동일한 스레드에서 실행되지만 애플리케이션의 나머지 부분과는 별도의 이벤트 루프에서 실행됩니다. 현재 매크로와 일반 코드 간에는 전역 변수가 공유되므로 매크로와 일반 코드 간에 상태를 공유할 수 있습니다 (권장하지는 않음). 매크로 외부에서 AST 노드를 사용하려고 하면 정의되지 않은 동작이 발생합니다.

---

.transform()

transform() 메서드는 .transformSync() 의 비동기 버전으로 Promise<string> 을 반환합니다.

const transpiler = new Bun.Transpiler({ loader: "jsx" });
const result = await transpiler.transform("<div>hi!</div>");
console.log(result);

많은 대용량 파일을 트랜스파일하는 것이 아니라면 Bun.Transpiler.transformSync 를 사용하는 것이 좋습니다. 스레드풀의 비용이 실제로 코드를 트랜스파일하는 시간보다 더 오래 걸리는 경우가 많습니다.

await transpiler.transform("<div>hi!</div>", "tsx");

세부 사항">

.transform() 메서드는 Bun 의 워커 스레드풀에서 트랜스파일러를 실행하므로 100 번 실행하면 메인 JavaScript 스레드를 차단하지 않고 Math.floor($cpu_count * 0.8) 스레드에서 실행됩니다.

코드에서 매크로를 사용하면 해당 새 스레드에서 Bun 의 JavaScript 런타임 환경의 새 사본을 잠재적으로 생성합니다.

---

.scan()

Transpiler 인스턴스는 소스 코드를 스캔하고 각 항목에 대한 추가 메타데이터와 함께 import 및 export 목록을 반환할 수도 있습니다. Type-only import 와 export 는 무시됩니다.

const transpiler = new Bun.Transpiler({
  loader: "tsx",
});

const code = `
import React from 'react';
import type {ReactNode} from 'react';
const val = require('./cjs.js')
import('./loader');

export const name = "hello";
`;

const result = transpiler.scan(code);

{
  "exports": ["name"],
  "imports": [
    {
      "kind": "import-statement",
      "path": "react"
    },
    {
      "kind": "import-statement",
      "path": "remix"
    },
    {
      "kind": "dynamic-import",
      "path": "./loader"
    }
  ]
}

imports 배열의 각 import 는 path 와 kind 를 가집니다. Bun 은 import 를 다음 카테고리로 분류합니다:

• import-statement: import React from 'react'
• require-call: const val = require('./cjs.js')
• require-resolve: require.resolve('./cjs.js')
• dynamic-import: import('./loader')
• import-rule: @import 'foo.css'
• url-token: url('./foo.png')

---

.scanImports()

성능에 민감한 코드의 경우 .scanImports() 메서드를 사용하여 import 목록을 가져올 수 있습니다. 이 메서드는 .scan() 보다 더 빠르며 (특히 대용량 파일의 경우) 일부 성능 최적화로 인해 정확도가 약간 낮습니다.

const transpiler = new Bun.Transpiler({
  loader: "tsx",
});

const code = `
import React from 'react';
import type {ReactNode} from 'react';
const val = require('./cjs.js')
import('./loader');

export const name = "hello";
`;

const result = transpiler.scanImports(code);

[
  {
    "kind": "import-statement",
    "path": "react"
  },
  {
    "kind": "require-call",
    "path": "./cjs.js"
  },
  {
    "kind": "dynamic-import",
    "path": "./loader"
  }
]

---

참조

type Loader = "jsx" | "js" | "ts" | "tsx";

interface TranspilerOptions {
  // key 를 value 로 교체. Value 는 JSON 문자열이어야 합니다.
  // { "process.env.NODE_ENV": "\"production\"" }
  define?: Record<string, string>,

  // 이 트랜스파일러의 기본 로더
  loader?: Loader,

  // 기본 타겟 플랫폼
  // 이는 import 및/또는 require 사용에 영향을 미칩니다
  target?: "browser" | "bun" | "node",

  // tsconfig.json 파일을 문자열화된 JSON 또는 객체로 지정
  // 사용자 정의 JSX factory, fragment 또는 import 소스를 설정하려면 이를 사용하세요
  // 예를 들어, React 대신 Preact 를 사용하거나 Emotion 을 사용하려는 경우.
  tsconfig?: string | TSConfig,

  // import 를 매크로로 교체
  macro?: MacroMap,

  // 제거할 export 집합 지정
  // 또는 특정 export 이름 변경
  exports?: {
      eliminate?: string[];
      replace?: Record<string, string>;
  },

  // 트랜스파일된 파일에서 사용하지 않는 import 제거 여부
  // 기본값: false
  trimUnusedImports?: boolean,

  // JSX 최적화 세트 활성화 여부
  // jsxOptimizationInline ...,

  // 실험적 공백 최소화
  minifyWhitespace?: boolean,

  // 상수 값 인라인 여부
  // 일반적으로 성능을 향상시키고 번들 크기를 줄입니다
  // 기본값: true
  inline?: boolean,
}

// import 경로를 매크로에 매핑
interface MacroMap {
  // {
  //   "react-relay": {
  //     "graphql": "bun-macro-relay/bun-macro-relay.tsx"
  //   }
  // }
  [packagePath: string]: {
    [importItemName: string]: string,
  },
}

class Bun.Transpiler {
  constructor(options: TranspilerOptions)

  transform(code: string, loader?: Loader): Promise<string>
  transformSync(code: string, loader?: Loader): string

  scan(code: string): {exports: string[], imports: Import}
  scanImports(code: string): Import[]
}

type Import = {
  path: string,
  kind:
  // JavaScript 의 import foo from 'bar';
  | "import-statement"
  // JavaScript 의 require("foo")
  | "require-call"
  // JavaScript 의 require.resolve("foo")
  | "require-resolve"
  // JavaScript 의 동적 import()
  | "dynamic-import"
  // CSS 의 @import()
  | "import-rule"
  // CSS 의 url()
  | "url-token"
  // Bun 에서 주입된 import
  | "internal"
  // 진입점 (일반적이지 않음)
  | "entry-point-build"
  | "entry-point-run"
}

const transpiler = new Bun.Transpiler({ loader: "jsx" });