Rollup中Babel转换未生效 搭配babel-plugin-import无作用问题问询

问题原因 #

1. 插件执行顺序错误：Rollup插件按数组从上到下的顺序执行，你当前配置中@rollup/plugin-babel放在rollup-plugin-typescript2之前，Babel默认仅处理JS/JSX文件，未编译的TS/TSX文件会被直接跳过，导致配置完全不生效。
2. Babel未配置适配TS/TSX后缀：默认@rollup/plugin-babel仅匹配.js、.jsx后缀文件，需要手动添加.ts、.tsx的匹配规则。
3. getBabelOutputPlugin作用阶段不符合需求：该插件作用于Rollup打包完成后的产物生成阶段，此时模块导入逻辑已经被Rollup处理完毕，babel-plugin-import作为源码级的导入转换插件，在这个阶段执行自然不会生效。

修复方案 #

1. 调整Rollup插件顺序 + 补充Babel配置 #

修改@rollup/plugin-babel的配置，放在rollup-plugin-typescript2之后，同时添加后缀匹配规则，修改后的plugins数组如下：

plugins: [
  peerDepsExternal({
    includeDependencies: true,
  }),
  json(),
  svgr(),
  resolve({ extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'] }),
  commonjs({
    include: /\**node_modules\**/,
  }),
  // 把typescript插件移到babel前面，先编译TS再走Babel转换
  typescript({
    useTsconfigDeclarationDir: true,
    exclude: ['*.d.ts', '**/*.d.ts', '**/*.test.tsx'],
    rollupCommonJSResolveHack: true,
    clean: true,
  }),
  // 补充extensions配置，让Babel处理TS/TSX文件
  babel({
    babelHelpers: 'bundled',
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    // 可选：如果不想单独维护babel.config.js，可以把配置直接写在这里
    // plugins: [['import', { libraryName: 'antd', libraryDirectory: 'lib', style: true }, 'antd']]
  }),
  postcss({
    extensions: ['.css', '.less'],
    use: {
      less: { javascriptEnabled: true, modifyVars: {} },
    },
  }),
  visualizer({ filename: 'stats-visualizer.html', gzipSize: true }),
  copy({ targets: [{ src: 'src/styles/**/*', dest: 'dist/styles' }] }),
],

2. 可选优化（自动导入Antd样式） #

如果需要babel-plugin-import自动注入Antd的样式，可以修改babel.config.js的配置，添加style字段：

// babel.config.js
module.exports = {
  plugins: [['import', { libraryName: 'antd', libraryDirectory: 'lib', style: true }, 'antd']],
};

如果不需要自动引入样式，保持原有配置即可。

内容的提问来源于stack exchange，提问作者Cristian Flórez