获取 esbuild 来监视更改、重建并重新启动 Express 服务器

Question

我正在尝试使用 Express + React 创建一个简单的 SSR 支持的项目。为此，我需要在开发过程中同时监视前端和后端脚本。

这里的目标是使用快速路由来指向反应页面组件。现在，我可以正常工作了，但我在使用 DX 时遇到了问题。

这是我的包脚本：

    "build:client": "esbuild src/index.js --bundle --outfile=public/bundle.js --loader:.js=jsx",
    "build:server": "esbuild src/server.jsx --bundle --outfile=public/server.js --platform=node",
    "build": "npm run build:client && npm run build:server",
    "start": "node ./public/server.js"

现在，如果我这样做的话npm run build && npm run start，这可以工作，但问题是它不会监视更改并重建前端包或重新启动后端服务器。

现在，如果我添加--watch到 2 个构建脚本，它只会开始监视index.js文件，而不会执行其他脚本。

因此，如果我添加nodemon到我的启动脚本中，那并不重要，因为由于观察程序，esbuild 不会通过第一个脚本。

有没有更简单的方法来完成我在这里尝试做的事情？一旦我弄清楚了这一点，我还想为这个项目添加顺风车，所以任何有关这方面的提示也会有所帮助。

Answer 1

我使用此代码片段来观看我的自定义 React 和 esbuild 项目

const esbuild = require("esbuild");
async function watch() {
  let ctx = await esbuild.context({
    entryPoints: ["./src/app.tsx"],
    minify: false,
    outfile: "./build/bundle.js",
    bundle: true,
    loader: { ".ts": "ts" },
  });
  await ctx.watch();
  console.log('Watching...');
}
watch();

有关更多详细信息：https://esbuild.github.io/api/#watch

Answer 2

@es-exec/esbuild-plugin-serve或者@es-exec/esbuild-plugin-start是两个 esbuild 插件，可以在构建项目后为您运行捆绑包或任何命令行脚本（类似于 nodemon）（支持用于重建和重新运行文件更改的监视模式）。

这样做很简单：

import serve from '@es-exec/esbuild-plugin-serve';

/** @type import('@es-exec/esbuild-plugin-serve').ESServeOptions */
const options = {
  ... // Any options you want to provide.
};

export default {
    ..., // Other esbuild config options.
    plugins: [serve(options)],
};

该文档可以在以下位置找到：

• @es-exec/esbuild-plugin-serve
• @es-exec/esbuild-plugin-start

免责声明：我是这些包的作者。

Answer 3

我建议使用 esbuild 的 JS 接口，即编写一个需要 esbuild 的小 JS 脚本并运行它，然后使用https://esbuild.github.io/api/#watch的功能版本。像这样的东西：

require('esbuild').build({
  entryPoints: ['app.js'],
  outfile: 'out.js',
  bundle: true,
  watch: {
    onRebuild(error, result) {
      if (error) console.error('watch build failed:', error)
      else { 
        console.log('watch build succeeded:', result)
        // HERE: somehow restart the server from here, e.g., by sending a signal that you trap and react to inside the server.
      }
    },
  },
}).then(result => {
  console.log('watching...')
})

更新

要在 esbuild 0.17+ 中获得相同的行为：

const config = {
  // entryPoints:
  // ...
  plugins: [{
    name: 'rebuild-notify',
    setup(build) {
      build.onEnd(result => {
        console.log(`build ended with ${result.errors.length} errors`);
        // HERE: somehow restart the server from here, e.g., by sending a signal that you trap and react to inside the server.
      })
    },
  }],
};

const run = async () => {
  const ctx = await esbuild.context(config);
  await ctx.watch();
};

run();