如何配置Babel CLI使out-dir路径相对待转译TypeScript文件所在目录

Babel 原生的 --out-dir 参数仅支持相对于命令执行的工作目录生成输出，没有提供基于单个源文件路径动态计算输出路径的能力，以下提供两种落地成本极低的通用方案，不需要为每个模块单独配置规则：

方案1：Shell 循环命令（适合*nix/WSL/Git Bash环境） #

直接修改 package.json 的构建命令，通过 glob 匹配所有符合规则的 TS 目录后逐一遍历构建，自动将输出路径替换为同级 js 目录：

{
  "scripts": {
    "build:js": "for dir in app/code/VendorName/**/view/adminhtml/web/ts; do babel \"$dir\" --out-dir \"${dir%/ts}/js\" --extensions \".ts,.tsx\" --source-maps inline; done"
  }
}

其中 ${dir%/ts} 是 Shell 参数替换语法，作用是去掉路径末尾的 /ts 后缀，拼接 /js 后刚好对应同级的 js 输出目录。

方案2：Node 脚本实现（全平台兼容） #

如果需要兼容 Windows 原生 cmd/PowerShell 环境，可以写一个极短的 Node 脚本完成遍历逻辑：

1. 先安装必要依赖：

npm i glob @babel/core -D

2. 在项目根目录新建 build-ts.js 文件，内容如下：

const glob = require('glob');
const { execSync } = require('child_process');

// 匹配所有符合规则的TS源码目录
const tsDirList = glob.sync('app/code/VendorName/**/view/adminhtml/web/ts');

tsDirList.forEach(tsDir => {
  // 替换得到同级js输出目录路径
  const outputDir = tsDir.replace(/\/ts$/, '/js');
  console.log(`构建目录：${tsDir} → ${outputDir}`);
  // 调用babel执行转译
  execSync(
    `babel "${tsDir}" --out-dir "${outputDir}" --extensions ".ts,.tsx" --source-maps inline`,
    { stdio: 'inherit' }
  );
});

3. 修改 package.json 的构建命令：

{
  "scripts": {
    "build:js": "node build-ts.js"
  }
}

两种方案都可以自动适配所有符合目录规则的模块，后续新增模块也不需要修改构建配置。

内容的提问来源于stack exchange，提问作者Daniel V.