Rollup构建ESM模块仅处理Flow语法不做额外Babel转译问题咨询

问题根因 #

你遇到的过度转译问题，核心原因是@rollup/plugin-babel默认会读取项目根目录下的.babelrc配置，哪怕你在Rollup配置里给babel插件设置了空presets，也会和全局的.babelrc配置合并，导致里面的@babel/preset-env仍在生效，执行多余的ES特性转译。

操作步骤 #

1. 先安装必要的Babel插件：

npm install @babel/plugin-transform-class-properties --save-dev

2. 给ESM构建单独配置Babel逻辑，禁用全局.babelrc读取，只保留你需要的两个能力：剥离Flow语法、转译类属性为合法JS，完全移除@babel/preset-env的影响。调整后的Rollup ESM构建配置如下：

import babel from '@rollup/plugin-babel';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';

export default [
  {
    input: 'src/index.js',
    output: [
      {
        file: 'dist/index.esm.js',
        format: 'esm',
      },
    ],
    plugins: [
      babel({
        babelrc: false, // 关键配置：停止读取全局.babelrc
        presets: ['@babel/preset-flow'], // 仅做Flow语法剥离
        plugins: [
          // 仅转译类属性语法，loose模式输出的代码更贴近原生写法
          ['@babel/plugin-transform-class-properties', { loose: true }]
        ],
        babelHelpers: 'bundled'
      }),
      commonjs(),
      nodeResolve()
    ],
  },
  // 你原来的UMD构建配置可以保持不变，依然使用全局.babelrc的配置转译为ES5
];

3. 不需要改动你现有的.babelrc和UMD构建逻辑，原来的UMD ES5版本、压缩版本的构建流程不受影响。

效果说明 #

这个配置下Babel只会移除Flow类型标注、把类属性语法转为合法的ES6代码，其他所有ES6+特性（包括展开运算符、箭头函数、解构等）都会完全保留，符合你ESM产物少转译的需求。你不需要再用rollup-plugin-flow，它无法处理类属性转译的问题，替换为上述Babel配置即可。

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