要实现一个 esbuild 插件，在处理 .less 文件时获取输出的 .css 文件并将其复制到另一个文件夹，你可以使用 onEnd 钩子来检测构建的输出文件。你已经找到了使用 outputFiles 来获取输出文件路径的方法。下面是一个具体的实现示例。

完整的 esbuild 插件示例

以下是一个实现这个功能的 esbuild 插件的代码示例。假设你已经在你的项目中正确安装并配置了 esbuild。

const fs = require('fs');
const path = require('path');

const copyArtifacts = {
    name: 'copy-artifacts',
    setup(build) {
        build.onEnd(async ({ errors, outputFiles }) => {
            if (!errors.length) {
                // 遍历所有输出文件
                outputFiles.forEach(out => {
                    const filePath = out.path;

                    // 检查文件扩展名，如果是 .css 文件
                    if (filePath.endsWith('.css')) {
                        // 定义目标复制路径，可以根据需求自定义
                        const targetDir = path.join(__dirname, 'dist/css');
                        const targetPath = path.join(targetDir, path.basename(filePath));

                        // 确保目标目录存在
                        fs.mkdirSync(targetDir, { recursive: true });

                        // 写入文件
                        fs.writeFileSync(targetPath, out.contents);
                        console.log(`Copied ${filePath} to ${targetPath}`);
                    }
                });
            }
        });
    },
};

module.exports = copyArtifacts;

插件使用示例

在你的构建脚本中，将这个插件与 esbuild 一起使用。例如：

const esbuild = require('esbuild');
const copyArtifacts = require('./path/to/copyArtifacts');

esbuild.build({
    entryPoints: ['./src/styles/code-sandbox.entry.less'],
    bundle: true,
    outdir: 'out',
    plugins: [copyArtifacts],
}).catch(() => process.exit(1));

说明

1. 获取输出文件: 在 build.onEnd 钩子中，你可以得到构建产生的所有输出文件。我们遍历这些文件，检查它们的扩展名，如果是 .css 文件，则进行后续操作。

2. 创建目标目录: 使用 fs.mkdirSync 确保要复制到的目录存在，{ recursive: true } 选项确保可以创建多层目录。

3. 复制文件: 使用 fs.writeFileSync 方法将输出内容写入到指定目录中。

4. 使用插件: 在 esbuild 的 build 方法中，将自定义插件添加到 plugins 数组中。

运行

通过运行你的 esbuild 构建脚本后，如果你的 .less 文件被处理并输出了 .css 文件，插件将自动复制这些文件到指定的 dist/css 目录中。

注意事项

• 确保你的环境中已经安装了 esbuild，并且项目依赖已经正确配置。
• 根据需要调整路径和文件复制逻辑，以适应你的项目结构。
• 这个示例代码可以根据你的具体需求进行扩展，比如处理更多文件类型或添加其他功能。