Windows环境下Next.js Chrome扩展构建后文本替换的npm脚本问题

sed命令报错原因 #

Windows环境下npm scripts默认使用cmd.exe执行命令，而cmd不支持单引号作为字符串包裹符。你写的sed -i 's/\\/_next/\\/assets/g' out/index.html中，单引号会被cmd直接忽略，导致sed收到的参数被拆分成多个部分，从而触发unknown command错误。另外，GNU sed在Windows下的-i参数需要指定备份后缀（比如-i.bak），直接用-i也可能引发问题。

perl命令在scripts中失效原因 #

同样是cmd的引号解析问题：当你把perl -p -i -e's/_next/assets/g' out/index.html放到npm scripts里时，cmd会将单引号当作普通字符，导致-e的参数被截断，perl无法识别完整的替换表达式，因此执行失败。

推荐使用Node.js脚本完成操作，既跨平台（Windows/macOS/Linux通用），又能避免shell环境的引号、参数解析问题。

步骤1：创建处理脚本 #

在项目根目录新建prepare-extension.js文件，内容如下：

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

async function main() {
  // 移动_next目录到assets
  const sourceDir = path.join(__dirname, 'out', '_next');
  const targetDir = path.join(__dirname, 'out', 'assets');
  await fs.rename(sourceDir, targetDir);

  // 替换index.html中的_next为assets
  const indexPath = path.join(__dirname, 'out', 'index.html');
  let content = await fs.readFile(indexPath, 'utf8');
  content = content.replace(/_next/g, 'assets');
  await fs.writeFile(indexPath, content);

  console.log('Extension prepare completed!');
}

main().catch(err => {
  console.error('Prepare failed:', err);
  process.exit(1);
});

步骤2：修改package.json脚本 #

更新package.json的scripts字段：

"scripts": {
  "build": "next build && next export && npm run prepare",
  "prepare": "node prepare-extension.js"
}

如果只需要适配Windows环境，也可以调整shell命令的引号和转义规则：

适配Windows cmd的sed命令

"prepare": "move out\\_next out\\assets && sed -i.bak \"s/\\/_next/\\/assets/g\" out\\index.html && del out\\index.html.bak"

（-i.bak会生成备份文件，最后用del删除备份）

适配Windows cmd的perl命令

"prepare": "move out\\_next out\\assets && perl -p -i -e \"s/_next/assets/g\" out\\index.html"

注：shell命令方式仅适用于Windows环境，跨平台场景优先选择Node.js脚本方案。

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