Node.js项目部署到Heroku时Babel报JSX语法错误如何解决？

问题根源 #

你本地运行正常、Heroku部署报错的核心原因是Babel编译规则配置过宽，误编译了Heroku构建阶段生成的临时文件：

• 你当前的build-babel命令用babel .编译整个项目根目录，仅忽略了node_modules目录
• Heroku部署时会在项目根目录生成临时的.heroku目录，该目录下npm自带的文档文件包含JSX语法
• 本地环境不存在该临时目录，所以不会触发报错
  你之前添加@babel/preset-react后仍未解决，是因为该方案只是支持了JSX编译，本质上还是在编译不属于你项目的无关临时文件，属于治标不治本。

解决步骤 #

1. 最优方案：指定编译目录（推荐）
   你是纯Node.js后端API项目，所有业务代码建议统一放在单独的源码目录（比如src），直接修改package.json中的build-babel命令，仅编译源码目录即可，完全不会触碰无关文件：

"build-babel": "babel src --out-dir dist"

2. 补充忽略目录（适配业务代码放在根目录的情况）
   如果你的业务代码确实直接放在根目录，没有单独的源码目录，就修改build-babel命令，把Heroku的临时目录加入忽略规则：

"build-babel": "babel . --out-dir dist --ignore node_modules,.heroku,*.md,.git"

3. 清理无效依赖（可选）
   你是纯后端项目，完全不需要JSX编译能力，可直接把@babel/preset-react从依赖项中删除，减少安装体积。

可选优化 #

你指定了Node.js 14.x作为运行环境，可修改.babelrc配置，让编译适配目标版本，减少不必要的转译，提升运行性能：

{
  "presets": [
    ["@babel/preset-env", {
      "targets": { "node": "14" }
    }]
  ],
  "plugins": [
      ["@babel/transform-runtime"]
  ]
}

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