我将我的应用程序从 webpacker 切换到 esbuild。我最大的问题是我不知道如何调试问题。当我运行 bin/dev 时，它会在运行 js 时退出：yarn build --watchcss：bin/rails tailwindcss：wa...

我将应用程序从 webpacker 切换到 esbuild。我最大的问题是我不知道如何调试问题。当我运行 bin/dev 时，它会在运行 js 时退出：yarn build --watchcss：bin/rails tailwindcss:watch

我尝试了 --trace 之类的东西，但没有其他信息。我自行运行了 yarn build --watchcss: bin/rails tailwindcss:watch，什么也没发生。没有错误或标志

16:43:45 web.1  | started with pid 99535
16:43:45 css.1  | started with pid 99536
16:43:45 js.1   | started with pid 99537
16:43:45 css.1  | yarn run v1.22.19
16:43:45 js.1   | yarn run v1.22.19
16:43:45 css.1  | $ tailwindcss --postcss --minify -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css --watch
16:43:45 js.1   | $ node esbuild.config.mjs --watchcss: bin/rails tailwindcss:watch
16:43:46 js.1   | Done in 0.41s.
16:43:46 css.1  | 
16:43:46 css.1  | Rebuilding...
16:43:46 js.1   | exited with code 0
16:43:46 system | sending SIGTERM to all processes
16:43:46 web.1  | terminated by SIGTERM
16:43:46 css.1  | exited with code 1

我的 tailwind.config.js 看起来像

const colors = require('tailwindcss/colors')
const defaultTheme = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config */
module.exports = {
  darkMode: 'class',

  plugins: [
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],

  content: [
    './app/components/**/*.rb',
    './app/helpers/**/*.rb',
    './app/javascript/**/*.js',
    './app/views/**/*.erb',
    './app/views/**/*.haml',
    './app/views/**/*.slim',
    './lib/jumpstart/app/views/**/*.erb',
    './lib/jumpstart/app/helpers/**/*.rb',
  ],

  theme: {
    extend: {
      colors: {
        purple: colors.purple,
        primary: colors.blue,
        secondary: colors.gray,
        tertiary: colors.gray,
        danger: colors.red,
        success: colors.green,
        info: colors.blue,
        warning: colors.yellow,
      },
      fontFamily: {
        sans: ['Inter', ...defaultTheme.fontFamily.sans],
      },
    },
  },

  future: {
  },
}

我的 esbuild.config.mjs 文件是

import * as esbuild from "esbuild"
import path from "path"
import rails from "esbuild-rails"
import chokidar from "chokidar"
import http from "http"
import { setTimeout } from "timers/promises"

const clients = []
const entryPoints = [
  "application.js",
  "administrate.js"
]
const watchDirectories = [
  "./app/javascript/**/*.js",
  "./app/views/**/*.html.erb",
  "./app/assets/builds/**/*.css", // Wait for cssbundling changes
  "./config/locales/**/*.yml",
]
const config = {
  absWorkingDir: path.join(process.cwd(), "app/javascript"),
  bundle: true,
  entryPoints: entryPoints,
  minify: process.env.RAILS_ENV == "production",
  outdir: path.join(process.cwd(), "app/assets/builds"),
  plugins: [rails()],
  sourcemap: process.env.RAILS_ENV != "production"
}

async function buildAndReload() {
  // Foreman & Overmind assign a separate PORT for each process
  const port = parseInt(process.env.PORT || 3200)
  console.log(`Esbuild is listening on port ${port}`)
  const context = await esbuild.context({
    ...config,
    banner: {
      js: `
        (() => { 
          if (typeof EventSource !== 'undefined') { 
            new EventSource("http://localhost:${port}").onmessage = () => location.reload()
          }
        })();
      `,
    }
  })

  // Reload uses an HTTP server as an even stream to reload the browser
  http
    .createServer((req, res) => {
      return clients.push(
        res.writeHead(200, {
          "Content-Type": "text/event-stream",
          "Cache-Control": "no-cache",
          "Access-Control-Allow-Origin": "*",
          Connection: "keep-alive",
        })
      )
    })
    .listen(port)

  await context.rebuild()
  console.log("[reload] initial build succeeded")

  let ready = false
  chokidar
    .watch(watchDirectories)
    .on("ready", () => {
      console.log("[reload] ready")
      ready = true
    })
    .on("all", async (event, path) => {
      if (ready === false)  return

      if (path.includes("javascript")) {
        try {
          await setTimeout(20)
          await context.rebuild()
          console.log("[reload] build succeeded")
        } catch (error) {
          console.error("[reload] build failed", error)
        }
      }
      clients.forEach((res) => res.write("data: update\n\n"))
      clients.length = 0
    })
}

if (process.argv.includes("--reload")) {
  buildAndReload()
} else if (process.argv.includes("--watch")) {
  let context = await esbuild.context({...config, logLevel: 'info'})
  context.watch()
} else {
  esbuild.build(config)
}