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 时,转译器在与当前执行代码相同的线程中运行。
如果使用宏,它将在与转译器相同的线程中运行,但在与应用程序其余部分 separate 的事件循环中。目前,宏和常规代码之间的全局变量是共享的,这意味着可以在宏和常规代码之间共享状态(但不推荐)。尝试在宏之外使用 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 次,它将在 Math.floor($cpu_count * 0.8) 个线程上运行,而不会阻塞主 JavaScript 线程。
如果你的代码使用宏,它可能会在那个新线程中生成 Bun 的 JavaScript 运行环境的新副本。
.scan()
Transpiler 实例还可以扫描一些源代码并返回其导入和导出的列表,以及每个导入和导出的额外元数据。仅类型 导入和导出被忽略。
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 数组中的每个导入都有 path 和 kind。Bun 将导入分类为以下类型:
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() 方法获取导入列表。它比 .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 {
// 用值替换键。值必须是 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 source
// 例如,如果你想使用 Preact 而不是 React。或者如果你想使用 Emotion。
tsconfig?: string | TSConfig,
// 用宏替换导入
macro?: MacroMap,
// 指定要消除的导出集
// 或重命名某些导出
exports?: {
eliminate?: string[];
replace?: Record<string, string>;
},
// 是否从转译文件中移除未使用的导入
// 默认:false
trimUnusedImports?: boolean,
// 是否启用一组 JSX 优化
// jsxOptimizationInline ...,
// 实验性空格最小化
minifyWhitespace?: boolean,
// 是否内联常量值
// 通常提高性能并减小包大小
// 默认:true
inline?: boolean,
}
// 将导入路径映射到宏
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 注入的导入
| "internal"
// 入口点(不常见)
| "entry-point-build"
| "entry-point-run"
}
const transpiler = new Bun.Transpiler({ loader: "jsx" });