如何通过Netlify构建部署用bun create react创建的Bun应用？

一、先搞定Bun Build的问题 #

用bun create react生成的项目，默认build命令可能没配置到位，直接修改package.json里的scripts即可：

• 打开package.json，把scripts改成下面这样：

  "scripts": {
    "dev": "bun --hot src/index.jsx",
    "build": "bun build src/index.jsx --outdir dist --target browser"
  }
  

• 然后在本地运行bun run build，正常情况下会生成dist目录，里面就是编译好的生产环境文件。如果还是报错：
  • 先升级到最新版Bun：bun upgrade
  • 确认src/index.jsx是你的项目入口文件（用TSX的话就改成src/index.tsx）

二、Netlify部署的两种方式 #

方式1：用Netlify CLI本地部署 #

1. 安装Netlify CLI：bun add -g netlify-cli
2. 在项目根目录登录Netlify：netlify login
3. 初始化部署配置：netlify init，跟着提示选择新建站点或关联已有站点
4. 配置环节，构建命令填bun run build，发布目录填dist
5. 直接部署到生产环境：netlify deploy --prod

方式2：通过GitHub自动部署 #

1. 把项目推送到GitHub仓库
2. 登录Netlify，点击「Add new site」->「Import an existing project」，选择你的GitHub仓库
3. 构建设置里填写：
   • 构建命令：bun run build
   • 发布目录：dist
   • 环境变量添加NODE_VERSION=18（Netlify默认Node环境可能需要指定，确保Bun能正常运行）
4. 点击「Deploy site」完成部署

三、常见问题处理 #

• 如果Netlify构建时提示找不到Bun，要么在环境变量里添加BUN_VERSION=latest，要么在项目根目录创建netlify.toml文件，内容如下：

  [build]
    command = "bun run build"
    publish = "dist"
  [build.environment]
    BUN_VERSION = "latest"
  

• 如果build后dist目录为空，检查入口文件路径是否正确，或者Bun的build参数有没有加--target browser，这个参数是确保编译出浏览器兼容的代码

内容的提问来源于stack exchange，提问作者Archie