使用babel-loader搭配transform-runtime插件出现两类构建报错求助

问题描述 #

我尝试将babel-loader与babel-plugin-transform-runtime插件配合使用，参考官方指引配置了webpack规则如下：

rules: [
  // the 'transform-runtime' plugin tells babel to require the runtime
  // instead of inlining it.
  {
    test: /\.js$/,
    exclude: /(node_modules|bower_components)/,
    use: {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
        plugins: ['@babel/transform-runtime']
      }
    }
  }
]

但构建时遇到两个问题：

• 当配置plugins: ['@babel/transform-runtime']时，报错：Module build failed: Error: Cannot find module '@babel/plugin-transform-runtime'
• 将插件名改为['transform-runtime']后，又报错：Module build failed: TypeError: this.setDynamic is not a function

原因分析及解决方案 #

第一个报错：模块找不到

这个问题的核心是插件包名错误和依赖未正确安装：

• Babel 7之后，所有官方插件的命名规范统一改为@babel/plugin-xxx，原来的transform-runtime插件对应的正确包名是@babel/plugin-transform-runtime，你配置里写的@babel/transform-runtime是错误的包名。
• 另外，这个插件需要搭配@babel/runtime使用（作为生产依赖，因为运行时会被注入到代码中）。

解决步骤：

1. 安装正确的依赖包：

# 开发依赖：插件本身
npm install --save-dev @babel/plugin-transform-runtime
# 生产依赖：运行时核心库
npm install @babel/runtime

2. 修改webpack配置中的插件名称，改为正确的包名：

plugins: ['@babel/plugin-transform-runtime']

第二个报错：this.setDynamic is not a function

这个错误是因为你使用了Babel 6版本的插件和Babel 7的预设@babel/preset-env混用导致的兼容性问题：

• transform-runtime是Babel 6时代的插件名称，对应的包是babel-plugin-transform-runtime，它和Babel 7的@babel/preset-env版本不兼容，从而触发了这个函数未定义的错误。

解决办法就是弃用旧版插件，改用上面提到的Babel 7版本的@babel/plugin-transform-runtime插件，并确保所有Babel相关依赖都是@babel/*前缀的7.x版本。

总结 #

确保你的Babel生态依赖都是统一的7.x版本，不要混用Babel 6和Babel 7的包，同时注意插件的正确命名和依赖安装，就能解决这两个问题。

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