在package.json脚本中混用concurrently与cross-env的问题排查

问题分析 #

你通过package.json的config字段指定包管理器CLI，单独运行dev-front/dev-back时正常，但用concurrently同时执行时，Windows系统下$npm_package_config_cli无法被正确解析，核心原因是Windows与Unix的shell变量语法差异，加上concurrently的嵌套引号解析规则冲突。

方案一：修复Concurrently的变量解析语法 #

通过cross-env先将npm_package_config_cli赋值为统一变量，再传递给cross-env-shell，避免嵌套引号导致的解析问题：

{
  "config": {
    "cli": "npm"
  },
  "scripts": {
    "dev": "cross-env CLI=$npm_package_config_cli concurrently -n front,back -c green,yellow -t 'HH:mm:ss' -p '{name} {time}' \"cross-env-shell 'cd ./frontend && $CLI run dev'\" \"cross-env-shell 'cd ./backend && $CLI run dev'\"",
    "dev-front": "cross-env-shell \"cd ./frontend && $npm_package_config_cli run dev\"",
    "dev-back": "cross-env-shell \"cd ./backend && $npm_package_config_cli run dev\""
  },
  "devDependencies": {
    "concurrently": "^7.6.0",
    "cross-env": "^7.0.3"
  }
}

原理：先用cross-env将npm_package_config_cli的值存入CLI变量，cross-env会自动处理Windows/Unix的环境变量语法差异，再在cross-env-shell中使用$CLI，同时调整引号嵌套规则（外层用双引号包裹cross-env-shell命令，内部用单引号），避免concurrently解析混乱。

方案二：更优的自动适配包管理器方案（无需手动指定CLI） #

手动配置cli字段不够灵活，可通过检测当前运行的包管理器自动适配，无需用户手动修改配置：

方式1：利用包管理器Workspace特性（推荐） #

如果你的Monorepo使用npm/yarn/pnpm的Workspace功能，直接通过包管理器的内置命令调用子项目脚本，无需cd和手动指定CLI：

1. 在根目录package.json中配置Workspace：

{
  "workspaces": [
    "frontend",
    "backend"
  ],
  "scripts": {
    "dev": "concurrently -n front,back -c green,yellow -t 'HH:mm:ss' -p '{name} {time}' \"npm run dev -w frontend\" \"npm run dev -w backend\""
  },
  "devDependencies": {
    "concurrently": "^7.6.0"
  }
}

• 运行时，无论你用npm run dev/yarn run dev/pnpm run dev，包管理器都会自动调用子项目对应的dev脚本，完全适配不同工具。

方式2：自动检测当前包管理器 #

如果未使用Workspace，可通过Node脚本自动检测当前运行的包管理器：

1. 在项目根目录创建scripts/detect-cli.js：

#!/usr/bin/env node
const execPath = process.env.npm_execpath || process.env.YARN_EXECPATH || process.env.PNPM_EXECPATH;
let cli = 'npm';
if (execPath?.includes('yarn')) {
  cli = 'yarn';
} else if (execPath?.includes('pnpm')) {
  cli = 'pnpm';
}
process.stdout.write(cli);

2. 修改package.json脚本：

{
  "scripts": {
    "dev": "concurrently -n front,back -c green,yellow -t 'HH:mm:ss' -p '{name} {time}' \"cross-env-shell 'cd ./frontend && $(node scripts/detect-cli.js) run dev'\" \"cross-env-shell 'cd ./backend && $(node scripts/detect-cli.js) run dev'\"",
    "dev-front": "cross-env-shell \"cd ./frontend && $(node scripts/detect-cli.js) run dev\"",
    "dev-back": "cross-env-shell \"cd ./backend && $(node scripts/detect-cli.js) run dev\""
  },
  "devDependencies": {
    "concurrently": "^7.6.0",
    "cross-env": "^7.0.3"
  }
}

• 原理：通过环境变量npm_execpath/YARN_EXECPATH/PNPM_EXECPATH识别当前包管理器，自动返回对应的CLI命令，无需手动配置。

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