如何为Parcel构建生成的dist文件设置不同命名？

先解决parcel-namer-custom的占位符失效问题 #

你使用的[N]并不是parcel-namer-custom支持的占位符语法，这个工具是通过正则捕获组来引用匹配内容的（比如$1、$2对应正则括号里的捕获内容），或者直接给匹配的文件指定固定命名规则。

调整后的配置示例 #

如果要给不同入口文件设置差异化命名，修改你的package.json配置如下：

"parcel-namer-custom": {
  "index.js$": "main-app.[hash].js",
  "page2.js$": "assembly-related.[hash].js",
  ".css$": "display.[hash].css"
}

如果需要引用正则捕获的内容（比如匹配文件名前缀），可以用带括号的正则：

"parcel-namer-custom": {
  "(index)\\.js$": "$1-file.[hash].js",
  "(page2)\\.js$": "$1-file.[hash].js"
}

注意：先执行npm update parcel-namer-custom更新到最新版本，旧版本可能存在匹配逻辑bug。

替代方案：PostBuild脚本重命名 #

如果上述工具仍然不生效，推荐用PostBuild脚本直接处理打包后的文件，逻辑更直观：

1. 新建rename-build-files.js脚本：

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

const distDir = path.join(__dirname, 'dist');
const files = fs.readdirSync(distDir);

// 根据你观察到的汇编文件特征来区分（比如内容包含特定字符串、文件更小等）
files.forEach(file => {
  if (file.endsWith('.js')) {
    const filePath = path.join(distDir, file);
    const content = fs.readFileSync(filePath, 'utf8');
    // 替换成你实际观察到的汇编文件特征字符串
    if (content.includes('assembly-specific-code')) { 
      fs.renameSync(filePath, path.join(distDir, `assembly-${file}`));
    } else {
      fs.renameSync(filePath, path.join(distDir, `main-app-${file}`));
    }
  }
});

2. 在package.json的scripts中添加：

"scripts": {
  "build": "parcel build",
  "postbuild": "node rename-build-files.js"
}

Parcel会自动在build命令执行完成后运行postbuild脚本，完成文件重命名。

替代方案：自定义Parcel Namer插件 #

如果需要更灵活的控制，可以写一个极简的自定义namer插件：

1. 新建parcel-namer-custom-simple.js：

module.exports = class CustomNamer {
  async name({ bundle }) {
    // 根据bundle的入口文件路径或其他特征判断类型
    if (bundle.entryAsset?.filePath.includes('index.js')) {
      return `main-app-[hash].${bundle.type}`;
    } else {
      return `assembly-file-[hash].${bundle.type}`;
    }
  }
};

2. 在.parcelrc中配置使用该插件：

{
  "namers": ["parcel-namer-custom-simple", "..."]
}

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