ElysiaJS 中文文档

Appearance

Our Sponsors
Open in Anthropic

title: 全栈开发服务器 - ElysiaJS head: - - meta - property: 'og:title' content: 全栈开发服务器 - ElysiaJS

- - meta
  - name: 'description'
    content: Bun 全栈开发服务器允许我们在单个项目中开发前端和后端，而无需任何打包工具。了解如何将 Elysia 与带有 HMR 和 Tailwind 支持的 Bun 全栈开发服务器结合使用。

- - meta
  - property: 'og:description'
    content: Bun 全栈开发服务器允许我们在单个项目中开发前端和后端，而无需任何打包工具。了解如何将 Elysia 与带有 HMR 和 Tailwind 支持的 Bun 全栈开发服务器结合使用。

Elysia 与 Bun 全栈开发服务器 ​

Bun 1.3 引入了一个支持 HMR 的全栈开发服务器。

这使我们能够直接使用 React，而无需像 Vite 或 Webpack 这样的打包工具。

您可以使用此示例快速体验。

否则，请手动安装：

  1. 安装 Elysia Static 插件
ts
import { Elysia } from 'elysia'
import { staticPlugin } from '@elysiajs/static'

new Elysia()
	.use(staticPlugin())
	.listen(3000)
  1. 创建 public/index.html 和 index.tsx
html
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Elysia React 应用</title>

		<meta name="viewport" content="width=device-width, initial-scale=1.0">
	</head>
	<body>
		<div id="root"></div>
		<script type="module" src="./index.tsx"></script>
	</body>
</html>
tsx
import { useState } from 'react'
import { createRoot } from 'react-dom/client'

function App() {
	const [count, setCount] = useState(0)
	const increase = () => setCount((c) => c + 1)

	return (
		<main>
			<h2>{count}</h2>
			<button onClick={increase}>
				增加
			</button>
		</main>
	)
}

const root = createRoot(document.getElementById('root')!)
root.render(<App />)
  1. 导航至 http://localhost:3000/public 查看结果。

这将使我们能够在单个项目中开发前端和后端，而无需任何打包工具。

我们已验证全栈开发服务器可与 HMR、Tailwind、Tanstack Query、Eden Treaty 和路径别名配合使用。

自定义前缀路径 ​

我们可以通过向 staticPlugin 传递 prefix 选项来更改默认的 /public 前缀。

ts
import { Elysia } from 'elysia'
import { staticPlugin } from '@elysiajs/static'

new Elysia()
  	.use(
  		staticPlugin({
  			prefix: '/'
   		})
   )
  .listen(3000)

这将在 / 而非 /public 下提供静态文件。

有关更多配置选项，请参阅 static plugin。

Tailwind CSS ​

我们也可以在 Bun 全栈开发服务器中使用 Tailwind CSS。

  1. 安装依赖项
bash
bun add tailwindcss@4
bun add -d bun-plugin-tailwind
  1. 创建包含以下内容的 bunfig.toml：
toml
[serve.static]
plugins = ["bun-plugin-tailwind"]
  1. 创建一个包含 Tailwind 指令的 CSS 文件
css
@tailwind base;
  1. 将 Tailwind 添加到您的 HTML 或 JavaScript/TypeScript 文件中
html
<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Elysia React 应用</title>

		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  		<link rel="stylesheet" href="tailwindcss"> 
	</head>
	<body>
		<div id="root"></div>
		<script type="module" src="./index.tsx"></script>
	</body>
</html>
tsx
import { useState } from 'react'
import { createRoot } from 'react-dom/client'

import './global.css'

function App() {
	const [count, setCount] = useState(0)
	const increase = () => setCount((c) => c + 1)

	return (
		<main>
			<h2>{count}</h2>
			<button onClick={increase}>
				增加
			</button>
		</main>
	)
}

const root = createRoot(document.getElementById('root')!)
root.render(<App />)

路径别名 ​

我们也可以在 Bun 全栈开发服务器中使用路径别名。

  1. 在 tsconfig.json 中添加 paths
json
{
  "compilerOptions": {
	"baseUrl": ".", // [!code +=]
	"paths": { // [!code +=]
	  "@public/*": ["public/*"] // [!code +=]
	} // [!code +=]
  }
}
  1. 在代码中使用别名
tsx
import { useState } from 'react'
import { createRoot } from 'react-dom/client'

import '@public/global.css'

function App() {
	const [count, setCount] = useState(0)
	const increase = () => setCount((c) => c + 1)

	return (
		<main>
			<h2>{count}</h2>
			<button onClick={increase}>
				增加
			</button>
		</main>
	)
}

const root = createRoot(document.getElementById('root')!)
root.render(<App />)

这将在无需任何额外配置的情况下开箱即用。

构建生产环境版本 ​

您可以像构建普通的 Elysia 服务器一样构建全栈服务器。

bash
bun build --compile --target bun --outfile server src/index.ts

这将创建一个名为 server 的可执行文件。

运行 server 可执行文件时，请确保包含与开发环境中类似的 public 文件夹。

有关更多信息，请参阅部署到生产环境。