如何在调试/发布前将多文件合并为单文件且无冗余代码？

步骤1：整理项目结构 #

先确认你的文件布局如下：

项目根目录/
├─ main.user.js
├─ another.js
├─ mycss.css
├─ changes.txt
└─ build.js  # 我们要编写的合并脚本

步骤2：编写合并脚本（build.js） #

用Node.js自带的文件系统模块就能实现，不需要额外安装依赖，代码如下：

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

// 匹配占位符的正则规则，对应//@@文件名@@格式
const placeholderRegex = /\/\/@@([\w\.]+)@@/g;

async function buildMainFile() {
  try {
    // 读取主文件内容
    const mainFilePath = path.join(__dirname, 'main.user.js');
    let mainContent = await fs.readFile(mainFilePath, 'utf8');

    // 替换所有占位符
    mainContent = await replaceAllPlaceholders(mainContent);

    // 输出合并后的文件，命名为main.build.user.js
    const outputPath = path.join(__dirname, 'main.build.user.js');
    await fs.writeFile(outputPath, mainContent, 'utf8');

    console.log('合并完成！输出文件：', outputPath);
  } catch (err) {
    console.error('合并出错：', err);
  }
}

async function replaceAllPlaceholders(content) {
  // 遍历所有匹配到的占位符，逐个替换
  const matches = content.matchAll(placeholderRegex);
  for (const match of matches) {
    const fullPlaceholder = match[0];
    const fileName = match[1];
    try {
      // 读取对应文件的内容
      const filePath = path.join(__dirname, fileName);
      let fileContent = await fs.readFile(filePath, 'utf8');

      // 处理CSS/文本文件的引号转义，避免破坏模板字符串结构
      if (fileName.endsWith('.css') || fileName.endsWith('.txt')) {
        fileContent = fileContent.replace(/`/g, '\\`');
      }

      // 替换当前占位符
      content = content.replace(fullPlaceholder, fileContent);
    } catch (err) {
      console.error(`读取文件${fileName}失败：`, err);
      throw err;
    }
  }
  return content;
}

// 执行合并逻辑
buildMainFile();

步骤3：运行脚本 #

在VSCode的终端里执行命令：

node build.js

执行完成后，会在根目录生成main.build.user.js，这就是合并后的最终文件。

步骤4：（可选）配置VSCode一键任务 #

如果不想每次手动敲命令，可以设置VSCode任务一键执行：

1. 按Ctrl+Shift+B打开任务面板，选择「创建tasks.json文件」
2. 选择「Others」，替换tasks.json内容为：

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "合并文件",
      "type": "shell",
      "command": "node build.js",
      "group": {
        "kind": "build",
        "isDefault": true
      },
      "problemMatcher": []
    }
  ]
}

之后按Ctrl+Shift+B就能直接触发合并操作。

注意事项 #

• 占位符格式必须是//@@文件名@@，要保证文件名和实际文件完全匹配（包括后缀）
• 若要修改占位符格式，调整placeholderRegex正则表达式即可
• 脚本会自动处理CSS/文本文件的反引号转义，避免出现语法错误

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