使用Rollup打包组件库时，如何解析.jsx文件？

现有配置 #

Rollup配置（rollup.config.mjs） #

/* eslint-disable import/no-extraneous-dependencies */
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import postcss from 'rollup-plugin-postcss';
import dts from 'rollup-plugin-dts';
import { babel } from '@rollup/plugin-babel';

// This is required to read package.json file when
// using Native ES modules in Node.js
// https://rollupjs.org/command-line-interface/#importing-package-json
import { createRequire } from 'node:module';
import path from 'path';
import { fileURLToPath } from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const requireFile = createRequire(import.meta.url);
const packageJson = requireFile('./package.json');


export default [{
  input: 'src/index.ts',
  output: [
    {
      file: packageJson.main,
      format: 'cjs',
      sourcemap: true
    },
    {
      file: packageJson.module,
      format: 'esm',
      sourcemap: true
    }
  ],
  plugins: [
    peerDepsExternal(),
    resolve(),
    commonjs(),
    typescript(),
    postcss({
      extensions: ['.css']
    })
  ]
}, {
  input: 'src/index.ts',
  output: [{ file: 'lib/index.d.ts', format: 'es' }],
  plugins: [dts()],
  external: [/\.css$/]
}];

Babel配置（babel.config.js） #

module.exports = (api) => {
  const isTest = api.env('test');
  api.cache(true);
  const plugins = [
    ['babel-plugin-styled-components', { ssr: !isTest, displayName: !isTest }],
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    '@babel/plugin-proposal-nullish-coalescing-operator',
    '@babel/plugin-proposal-class-properties',
    '@babel/plugin-proposal-private-methods',
    '@babel/plugin-proposal-export-default-from',
    '@babel/plugin-proposal-optional-chaining'
  ];
  return {
    presets: ['@babel/preset-env', '@babel/react', '@babel/preset-typescript'],
    plugins
  };
};

tsconfig配置（tsconfig.json） #

{
  "compilerOptions": {
    "baseUrl": ".",
    "rootDirs": [
      "src",
      "stories"
    ],
    "paths": {
      "components/*": ["src/components/*"],
      "libs/*": ["src/libs/*"],
      "fonts/*": ["src/fonts/*"],
      "styles/*": ["src/styles/*"],
      "utils/*": ["src/utils/*"],
      "constants/*": ["src/constants/*"],
    },
    "sourceMap": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "experimentalDecorators": true,
    "strictNullChecks": true,
    "target": "es5",
    "outDir": "lib",
    "downlevelIteration": true,
    "lib": ["dom", "dom.iterable", "esnext"],
    "declaration": true,
    "declarationDir": "lib",
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": ["src/**/*", "index.d.ts"],
  "exclude": [
    "node_modules",
    "stories",
    "./lib/**/*",
    ".storybook",
    "webpack",
    "jest",
    "src/babel.config.js",
    "src/babel.config.pack.js",
    "src/common.babel.js",
    "src/setupTests.js",
    "**/*/*.test.ts",
  ]
}

遇到的错误 #

1. 组件入口为index.js时，报错：

[!] RollupError: Could not resolve "./Checkbox" from "src/components/Checkbox/index.js"
src/components/Checkbox/index.js

2. 将入口改为index.jsx后，新错误：

src/index.ts → lib/index.js, lib/index.esm.js...
[!] RollupError: Could not resolve "./components/Checkbox" from "src/index.ts"
src/index.ts

尝试添加以下Babel插件配置后问题仍未解决：

babel({
  babelHelpers: 'bundled',
  extensions: ['.js', '.jsx', '.ts', '.tsx'],
  exclude: 'node_modules/**',
})

解决方案 #

步骤1：配置Rollup的resolve插件支持.jsx后缀 #

修改Rollup配置中的resolve插件，添加extensions选项明确包含.jsx：

resolve({
  extensions: ['.mjs', '.js', '.jsx', '.json', '.ts', '.tsx']
}),

步骤2：让TypeScript处理.jsx文件 #

在@rollup/plugin-typescript配置中指定包含.jsx扩展名：

typescript({
  extensions: ['.ts', '.tsx', '.js', '.jsx']
}),

步骤3：调整Babel插件的顺序 #

确保Babel插件在typescript插件之前执行，因为需要先转译JSX语法再处理TypeScript：
修改Rollup的plugins顺序为：

plugins: [
  peerDepsExternal(),
  resolve({ extensions: ['.mjs', '.js', '.jsx', '.json', '.ts', '.tsx'] }),
  commonjs(),
  babel({
    babelHelpers: 'bundled',
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    exclude: 'node_modules/**',
  }),
  typescript({ extensions: ['.ts', '.tsx', '.js', '.jsx'] }),
  postcss({ extensions: ['.css'] })
]

步骤4：检查导入路径与文件匹配 #

确保src/index.ts中导入组件的路径正确，比如：

import Checkbox from './components/Checkbox';

对应的Checkbox文件夹下存在index.jsx文件，且tsconfig的paths配置已覆盖该路径。

步骤5：更新dts插件配置（可选） #

如果生成类型声明时遇到.jsx相关问题，调整dts插件的external配置忽略.jsx文件：

{
  input: 'src/index.ts',
  output: [{ file: 'lib/index.d.ts', format: 'es' }],
  plugins: [dts()],
  external: [/\.css$/, /\.jsx$/]
}

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