查看原文
其他

使用Bun和Next.js构建应用程序

小懒 FED实验室 2024-02-12

Bun 是一个一体化的 JavaScript 运行时和工具包,设计速度极快。它配备了Bundler、Test Runner、原生 TypeScript 和 JSX 支持,甚至还有一个兼容 Node.js 的包管理器。

Next.js 是由 Vercel 创建的基于 React 的开源 Web 开发框架,以其独特的功能(如服务器端渲染和增强搜索引擎优化)而闻名。它还有一些附加功能,如数据获取工具、动态 API 路由、优化构建等。它是基于 React、Webpack 和 Babel 构建的框架。

1.安装 Bun

Bun 安装比较简单,但是windows系统暂不支持:

curl https://bun.sh/install | bash

2.项目初始化

通过 create-next-app 可以快速初始化一个 Next.js 项目。

$ bun create next-app
✔ What is your project named? … my-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias? … No / Yes
Creating a new Next.js app in /Users/zuojunjun/Documents/workspaces/github-workspace/blog/fedlab/2023/09/0918/my-app.

Using bun.

Initializing project with template: app-tw


Installing dependencies:
- react
- react-dom
- next
- typescript
- @types/react
- @types/node
- @types/react-dom
- tailwindcss
- postcss
- autoprefixer
- eslint
- eslint-config-next

使用 create-next-app 初始化 Next.js 应用程序。默认会使用 npm 自动安装依赖项。

3.本地运行项目

  1. 使用 Bun 运行时
$ cd my-app
$ bun --bun run dev
- ready started server on localhost:3000, url: http://localhost:3000
- event compiled client and server successfully in 314 ms (20 modules)
- wait compiling...
- event compiled client and server successfully in 67 ms (20 modules)
- wait compiling /page (client and server)...
- event compiled client and server successfully in 3.6s (417 modules)
- wait compiling...
- event compiled successfully in 367 ms (235 modules)
ConnectionClosed: The socket connection was closed unexpectedly. For more information, pass `verbose: true` in the second argument to fetch()
path: "http://localhost:61154/"

- wait compiling /_error (client and server)...
  1. 使用 Node.js 运行时

移除 --bun 参数,默认使用 Node.js 运行时

$ bun run dev
- ready started server on [::]:3000, url: http://localhost:3000
- event compiled client and server successfully in 303 ms (20 modules)
- wait compiling...
- event compiled client and server successfully in 172 ms (20 modules)
- wait compiling /page (client and server)...
- event compiled client and server successfully in 2.5s (417 modules)
- wait compiling...
- event compiled successfully in 328 ms (235 modules)

4.生产环境编译

Bun 运行时暂不支持生产环境 build,直接通过 bun run build 命令来实现。

bun run build

5.运行生产环境代码

bun run start

下面是「FED 实验室」的微信公众号名片,欢迎关注:
继续滑动看下一个

使用Bun和Next.js构建应用程序

小懒 FED实验室
向上滑动看下一个

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存