如何实现先通过Rollup打包代码再交由Babel转译？

需求背景 #

基于@rollup/plugin-babel的说明，要实现「先Rollup打包生成独立包，再用Babel转译ES6/7代码」的流程，避免Gulp中依赖中间文件的方式。

针对原疑问的解答 #

1. 阻止构建阶段自动运行Babel #

要手动控制Babel的执行时机，有两种直接方式：

• 移除@rollup/plugin-babel在Rollup插件数组中的配置，让插件不在文件读取阶段触发转译；
• 保留插件但修改babelHelpers配置为非bundled值，改变助手函数的注入逻辑，间接阻止默认的前置转译行为。

2. 在buildEnd钩子中调用Babel #

如果坚持用自定义插件实现后置转译，可按以下步骤操作：

1. 先安装@babel/core依赖
2. 编写自定义插件，在buildEnd钩子中读取Rollup输出产物并调用Babel：

import babel from '@babel/core';
import fs from 'fs/promises';

export default function postBuildBabel() {
  return {
    name: 'post-build-babel',
    async buildEnd() {
      // 替换为你的Rollup输出文件路径
      const code = await fs.readFile('./dist/bundle.js', 'utf8');
      const result = await babel.transformAsync(code, {
        // 填入你的Babel配置，比如预设、插件
        presets: ['@babel/preset-env']
      });
      await fs.writeFile('./dist/bundle.js', result.code);
    }
  };
}

最后将这个自定义插件加入Rollup的plugins数组即可。

开箱即用的更优方案 #

手动实现需要自行处理文件读写，推荐使用rollup-plugin-swc-minify插件：

• 基于SWC实现，支持打包完成后统一转译+压缩，对小型项目的压缩效果优于Terser和Babel minify；
• 配置简单，直接加入Rollup插件数组：

import swcMinify from 'rollup-plugin-swc-minify';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife' // 独立包格式
  },
  plugins: [
    // 其他Rollup插件（如resolve、commonjs等）
    swcMinify({
      jsc: {
        target: 'es5' // 按需调整转译目标版本
      }
    })
  ]
};

• 若在Gulp环境中调用Rollup API出现问题，可直接在Gulp任务中执行Rollup CLI命令，无需依赖中间文件：

const { exec } = require('child_process');

gulp.task('build', (cb) => {
  exec('rollup -c', (err, stdout, stderr) => {
    if (err) {
      console.error(stderr);
      return cb(err);
    }
    console.log(stdout);
    cb();
  });
});

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