如何配置esbuild实现变更监听、重构建及Express服务自动重启

esbuild的--watch模式是常驻阻塞进程，直接在串行npm脚本里加会卡住后续命令执行，用跨平台并行任务调度+产物监听的方式就能解决，步骤如下：

• 安装开发依赖：
  npm i -D concurrently nodemon
concurrently用来并行启动多个互不阻塞的常驻进程，nodemon用来监听构建产物触发服务重启。
• 调整package.json脚本配置：

{
  "scripts": {
    "build:client": "esbuild src/index.js --bundle --outfile=public/bundle.js --loader:.js=jsx",
    "build:client:watch": "npm run build:client -- --watch",
    "build:server": "esbuild src/server.jsx --bundle --outfile=public/server.js --platform=node",
    "build:server:watch": "npm run build:server -- --watch",
    "start": "node ./public/server.js",
    "start:watch": "nodemon --watch public/server.js ./public/server.js",
    "dev": "concurrently \"npm run build:client:watch\" \"npm run build:server:watch\" \"npm run start:watch\""
  }
}

执行npm run dev就能启动开发环境：

1. 两个watch模式的esbuild进程分别监听前后端源码变更，自动重新构建产物到public目录
2. nodemon仅监听最终输出的服务端bundlepublic/server.js，文件更新后自动重启node服务

• 注意不要让nodemon监听src源码目录，否则会在esbuild未完成构建时提前触发重启，读到半写入的文件导致报错，仅监听构建产物可以保证重启时序正确。
  如果不想额外安装concurrently，类Unix系统下可以直接用shell的&语法实现并行，但跨平台兼容性差，不推荐。

适配你当前的esbuild+SSR技术栈，按以下步骤配置即可：

• 安装依赖：
  npm i tailwindcss postcss autoprefixer
• 执行初始化命令生成配置文件：
  npx tailwindcss init -p
  命令执行后会在项目根目录生成tailwind.config.js和postcss.config.js两个文件。
• 修改tailwind.config.js的内容扫描路径，确保tailwind能识别所有文件里的类名：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./public/**/*.html"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

• 新建全局样式文件src/index.css，加入tailwind核心指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

• 在客户端入口文件src/index.js的最顶部引入该样式文件：

import './index.css'

esbuild原生支持CSS打包，开发模式下会自动处理样式并注入到页面，修改tailwind类名或全局样式时会自动触发客户端bundle重建，刷新页面即可看到变更。

• 开发阶段不需要额外配置SSR的样式注水逻辑，等后续做生产构建优化时，再考虑CSS抽离、关键样式服务端注入等进阶能力即可。

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