说起来，

没错，bun可以直接编译tsx。

我之前做谷歌插件。就是用bun+tsx做的，没有webpack也没有vite。

Bun 对 TSX提供了原生、零配置的一流支持。如果你正为繁琐的建立工具配置、长时间的打包等待而头疼，那么 Bun 可能正是你在寻找的“优雅”方案。

一、直接运行：bun run app.tsx

Bun 最吸引人的特性是无需任何建立工具就能直接执行 TSX 文件。你只需要一个命令：

bun run app.tsx # 或简写为 bun app.tsx

来看一个完整的示例 app.tsx

// 无需 import React
interface User { id: number;name: string;}
const UserCard = => {
return (


{user.name}

ID这方面，{user.id}

);}，const data: User = { id: 1,name: "Alice" };console.log，

执行后Bun 的内部转译器会在内存中即时将 TSX 转换为纯 JavaScript接下来立即执行。整个过程通常在50ms以内比 ts-node/快得多。

痛点：你是否还在为每次改动后重新启动或热更新等待几秒钟而烦恼？Bun 的即时执行几乎消除了这种等待。

二、编译为 JavaScript 的三种方式

当需要部署到生产环境时我们通常需要将 TSX 编译为纯 JS 文件。Bun 提供了三种灵活的方式。

使用 Bun.build API

Bun.build 是官方推荐的打包方式。 它会解析入口文件的所有依赖，并输出调整后的 JS 文件。

// build.js
const result = await Bun.build({
entrypoints:,// 入口
说到outdir，'./dist',// 输出目录
target这方面，'browser'。// 目标环境：'browser' | 'bun' | 'node'
minify这方面，true,// 是否压缩
splitting: true,// 是否代码分割
sourcemap: 'external',// 生成外部 sourcemap
external:,// 可指定外部依赖，不打包进 bundle
});if {
console.error;process.exit;}
console.log;result.outputs.forEach);话说回来，

bun run build.js

使用 CLI 命令 bun build

If you prefer command line。Bun also offers bun build command which mirrors API:

bun build ./src/index.tsx --outdir ./dist --target browser --minify

This is perfect for adding to your "scripts" :

{
"scripts": {
"build": "bun build ./src/index.tsx --outdir ./dist --target browser --minify"
}
}

使用 Bun.Transpiler 做代码级转译

If you only want to convert a TSX string to JS without resolving imports or bundling,use

import { Transpiler } from 'bun';const transpiler = new Transpiler({
loader : 'tsx'。tsconfig : './tsconfig.json',});const tsxSource = `
import React from 'react';const App = =>

Hello,{props.name}
export default App;`，const jsOutput = transpiler.transformSync;console.log，// Standard JavaScript string
// async version:
const asyncResult = await transpiler.transform;console.log，

三、配置细节：tsconfig.json 与 bunfig.toml

Bun 会读取项目根目录下的 tsconfig.json   .

{ \"compilerOptions\": { \"jsx\": \"react-jsx\",/* 新 JSX 转换，无需 import React */ \"jsxImportSource\": \"react\",\"target\": \"ESNext\",\"module\": \"ESNext\",\"strict\": true,\"esModuleInterop\": true } } .

• MUST NOT set ""jsx": "preserve"" in tsconfig. Reason这方面。No runtime conversion → error.
• You can also configure JSX in bunfig.toml :

runtime = \"automatic\" # automatic | classic importSource = \"react\" .

四、性能与注意事项

• Bun's transpiler does *only* syntax conversion – it does not perform type checking.
• This means even if you have type errors,`bun run` will still execute:

// type-error.tsx const count : number = "这是一个字符串";console.log，/* Bun 能正常运行！*/

• The recommended practice for production is to run a separate type-check step in CI/CD:

html