使用Rollup与Babel打包远程React(TypeScript)项目遇错求助

这个报错核心是Rollup无法识别JSX语法，再加上你的插件配置顺序、路径存在问题，按以下步骤修复：

1. 调整插件执行顺序 #

Rollup插件的执行顺序是关键，正确顺序应该是先解析模块路径，再处理CommonJS模块，接着编译TypeScript，最后处理JSX。把你的plugins数组调整为：

plugins: [
  resolve({ extensions: ['.ts', '.tsx'] }), // 先解析模块，指定支持的扩展名
  commonjs(),
  typescript({ tsconfig: "../tsconfig.json" }),
  babel({ 
    presets: ["@babel/preset-react", "@babel/preset-typescript"],
    extensions: ['.ts', '.tsx'] // 指定Babel处理的文件扩展名
  }),
],

2. 修正tsconfig.json配置 #

确保你的tsconfig包含JSX相关配置，并且能覆盖到临时文件夹里的文件：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx", // 或"react"，根据你的React版本选择
    "strict": true,
    "moduleResolution": "Node",
    "esModuleInterop": true
  },
  "include": ["../临时文件夹路径/**/*"] // 替换成实际临时文件夹路径，确保包含App.tsx
}

3. 检查依赖是否齐全 #

确保已经安装所有必需的包：

npm install rollup @rollup/plugin-node-resolve @rollup/plugin-commonjs @rollup/plugin-typescript @babel/core @babel/preset-react @babel/preset-typescript typescript @types/react --save-dev

4. 修正Rollup配置的冗余冲突 #

你在inputOptions里定义的output字段和单独的outputOptionsList存在冲突，统一保留outputOptionsList即可，删除inputOptions中的output字段：

const inputOptions: RollupOptions = {
  input: "FOLDER_PATH/App.tsx", // 替换成实际临时文件夹路径
  external: ["react", "react-dom"],
  plugins: [
    resolve({ extensions: ['.ts', '.tsx'] }),
    commonjs(),
    typescript({ tsconfig: "../tsconfig.json" }),
    babel({ 
      presets: ["@babel/preset-react", "@babel/preset-typescript"],
      extensions: ['.ts', '.tsx']
    }),
  ],
};

const outputOptionsList: OutputOptions[] = [
  {
    file: "./dist/bundle.jsx",
    format: "cjs",
    sourcemap: true // 可选，便于调试
  },
];

验证修复 #

运行Rollup打包后，检查dist/bundle.jsx，确认JSX语法（比如<div>）已被正确编译为React对应的调用代码。

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