Babel插件transform-runtime仅首次编译后生效，dev运行时遇import语法错误

嘿，我之前也踩过这个Babel runtime的坑，咱们来一步步搞定它！

首先，先拆解你遇到的错误：SyntaxError: Unexpected token import 本质是Node.js环境默认不支持ES6的import语法，而babel-runtime/helpers里的代码被以ES模块的形式引入了，导致Node无法解析。而transform-runtime首次编译生效、dev模式失效，大概率是dev环境的Babel配置没跟上，或者缓存搞的鬼。

下面是具体的解决步骤：

1. 修正Babel配置，强制输出CommonJS格式 #

打开你的.babelrc或者babel.config.js，确保transform-runtime插件的useESModules选项设为false——这个选项决定了runtime helpers是输出ES模块还是CommonJS模块，Node环境需要后者：

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "helpers": true,
      "polyfill": true,
      "regenerator": true,
      "useESModules": false // 关键配置，必须设为false
    }]
  ]
}

注意：如果你用的是旧版Babel（比如Babel 6），插件名是transform-runtime，对应的配置写法一致。

2. 检查dev脚本的Babel加载方式 #

如果你的dev脚本用了babel-register或者nodemon，要确保Babel能正确处理所有相关文件：

• 如果你用babel-register，要在入口文件最顶部引入它，确保它先加载：

  // 入口文件顶部
  require('babel-register');
  require('./app');
  

• 如果你用nodemon，直接用babel-node执行入口文件会更稳妥，避免配置遗漏：

  // package.json的scripts
  "dev": "nodemon --exec babel-node src/index.js"
  

3. 清理缓存，重置依赖 #

有时候缓存会残留旧的编译结果，导致dev模式下代码没被重新转译：

• 清理Yarn缓存：yarn cache clean
• 删除node_modules和锁文件，重新安装依赖：rm -rf node_modules yarn.lock && yarn install
• 重启dev服务，确保所有代码重新编译

为什么首次编译生效、dev时失效？ #

通常首次编译是生产模式的完整构建，Babel会把所有ES语法转译为Node能识别的CommonJS；但dev模式下如果用了babel-register（动态转译）或者nodemon的热重载，可能因为配置没覆盖到runtime相关文件，或者缓存导致旧的ES模块代码没被更新，就出现了import语法错误。

内容的提问来源于stack exchange，提问作者Raphaël Gomès