Rollup构建React Native组件库遇Expression expected报错（@expo/icons相关）

问题原因 #

报错是因为Rollup无法解析@expo/vector-icons包中的JSX语法（第39行的<Text />）。当前配置仅处理了项目src目录下的TypeScript文件，未对node_modules中包含JSX的依赖文件进行转译，而Rollup本身不支持直接解析JSX。

解决方案 #

1. 安装必要的转译依赖 #

yarn add -D @rollup/plugin-babel @babel/preset-react @babel/core

2. 更新Rollup配置文件 #

修改rollup.config.js，添加Babel插件处理JSX转译，并指定需要处理的依赖包路径：

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

export default {
  input: ['src/index.ts'],
  output: {
    dir: 'dist',
    format: 'esm',
    sourcemap: true,
    preserveModules: true
  },
  external: ['react/jsx-runtime', 'react', 'react-native', '@expo/icons', '@expo/vector-icons'],
  plugins: [
    nodeResolve(),
    commonjs(),
    babel({
      babelHelpers: 'bundled',
      presets: ['@babel/preset-react'],
      // 指定需要转译的文件范围，包含项目源码和目标依赖
      include: [
        'src/**/*',
        'node_modules/@expo/vector-icons/**/*',
        'node_modules/@expo/icons/**/*'
      ]
    }),
    typescript({ tsconfig: './tsconfig.json' })
  ]
}

3. 可选：调整外部依赖配置 #

如果你的组件库不需要将@expo/icons和@expo/vector-icons打包进产物（希望由使用组件库的项目自行安装这些依赖），可以确保它们在external数组中，这样Rollup会跳过对这些包的处理，进一步简化构建流程。

说明 #

• @babel/preset-react负责将JSX语法转译为普通JavaScript代码，让Rollup能够正常解析。
• 配置include是为了告诉Babel不仅处理项目源码，还要处理@expo/vector-icons和@expo/icons中的JSX文件。
• babelHelpers: 'bundled'会将所需的Babel辅助函数打包进产物，避免依赖外部的辅助函数库。

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