Babel 如何接入 Webpack、Vite 和 Rollup？

Babel 接入构建工具的核心思路是：让构建工具负责文件扫描、依赖图和打包，Babel 只负责把指定源码转换成目标语法。Webpack 通常用 babel-loader，Vite 默认走 esbuild，只有需要 Babel 插件时才通过 React 插件或 Babel 插件接入，Rollup 用 @rollup/plugin-babel，库开发还要特别处理 helpers。

关键不是“能不能接”，而是“什么时候该接”。如果只是语法降级，Vite/esbuild 或 SWC 往往更快；如果要 decorators、宏、React 特定转换、自定义 AST 插件，才值得引入 Babel。

追问

Webpack 里 Babel 放在哪一层？

放在 module rules 的 loader 阶段。Webpack 匹配 js/jsx/ts/tsx 文件后交给 babel-loader，Babel 根据 preset 和 plugin 输出新代码。

Vite 为什么默认不依赖 Babel？

因为 Vite 开发阶段追求速度，默认用 esbuild 做转译。只有遇到 Babel 生态里的插件能力，比如 legacy decorators，才需要补 Babel。

Rollup 里 babelHelpers 怎么选？

应用打包可用 bundled，helpers 直接打进产物。库开发更推荐 runtime，并把 @babel/runtime 设为 external，避免每个包重复注入 helpers。

实际项目里容易踩什么坑？

最常见是把整个 node_modules 都交给 Babel，构建变慢。更稳的做法是用 include 精准指定 src 和少数需要转译的第三方包。

写段代码

javascript
// webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /\.[jt]sx?$/,
      include: /src/,
      use: { loader: 'babel-loader', options: { cacheDirectory: true } }
    }]
  }
};