如何在esbuild中正确设置资源路径

Question

esbuild中的assets路径该如何配置？我当前的配置如下所示：

const esbuild = require("esbuild");

esbuild.build({
  bundle: true,
  entryPoints: ["src/index.tsx"],
  outdir: "public/build",
  splitting: true,
  minify: true,
  sourcemap: true,
  format: "esm",
  inject: ["react-shim.js"],
  loader: {
    ".png": "file",
    ".jpg": "file",
    ".jpeg": "file",
    ".svg": "file",
    ".gif": "file",
  },
  assetNames: "[dir]/[name]",
});

我的文件如下： 公共->index.html

在构建过程中，公共会创建“build”文件夹，其中有 asset/ 和 index.js 以及 main.css，esbuild 为目录名和文件名提供通用占位符，您可以通过 assetNames 属性看到它们，我是期望保存这些文件的任何文件夹都将使用相同的名称复制并附加到 outdir 中给定的路径。这正是正在发生的情况，但在浏览器的“网络”选项卡中，资产的路径是“...smth/front/public/assets/cart.svg”。跳过构建文件夹。当我尝试将其附加到 assetNames 时，就像这样

assetNames: "build/[dir]/[name]",

然后在构建文件夹中，有另一个使用资产文件夹和文件创建的构建文件夹。为什么会这样？我该怎么办？为了以防万一，我正在使用 React 18 和 typescript。谢谢

Answer 1

添加“publicPath”对我有帮助：

assetNames: "[dir]/[name]-[hash]",
publicPath: "/build/",

另一个选择是使用复制插件： https://www.npmjs.com/package/esbuild-plugin-copy