React-Native组件库Rollup.js打包正确配置与报错解决

核心问题点 #

• 未将react、react-native等宿主环境提供的依赖标记为外部依赖，Rollup默认尝试打包这类依赖时触发解析错误
• 类型声明打包的输入路径配置错误，和tsconfig实际输出的声明文件路径不匹配
• 插件默认配置适配Node环境，未针对React Native的文件后缀、模块解析规则做调整
• tsconfig中emitDeclarationOnly: true配置和当前JS打包逻辑冲突，会导致无法正常输出JS产物

修正步骤 #

1. 调整tsconfig.json配置 #

移除和Rollup打包逻辑冲突的配置项，修正声明文件输出路径：

{
  "compilerOptions": {
    "jsx": "react-native",
    "module": "ESNext",
    "target": "ESNext",
    "declaration": true,
    "declarationDir": "dist/types",
    "sourceMap": true,
    "outDir": "dist",
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}

2. 修正rollup.config.js配置 #

补充外部依赖标记、适配RN模块解析规则、修正类型文件路径：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import dts from 'rollup-plugin-dts';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';

const packageJson = require('./package.json');

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: packageJson.main,
        format: 'cjs',
        sourcemap: true,
        exports: 'named'
      },
      {
        file: packageJson.module,
        format: 'esm',
        sourcemap: true
      }
    ],
    plugins: [
      peerDepsExternal(),
      resolve({
        extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
        preferBuiltins: false
      }),
      commonjs(),
      typescript({ tsconfig: './tsconfig.json' })
    ]
  },
  {
    input: 'dist/types/index.d.ts',
    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
    external: [/\.s?css$/],
    plugins: [dts()]
  }
];

若不想额外安装rollup-plugin-peer-deps-external，可直接在第一个配置项中新增external: ['react', 'react-native', /^react-native\//]字段，手动标记所有不需要打包进产物的宿主依赖、peer依赖即可。

3. 调整package.json配置 #

确保入口字段、peer依赖配置正确：

{
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "types": "dist/index.d.ts",
  "peerDependencies": {
    "react": ">=17.0.0",
    "react-native": ">=0.68.0"
  }
}

执行验证 #

• 先删除项目根目录下旧的dist文件夹，避免历史缓存文件干扰
• 执行npm install安装缺失的依赖包
• 执行rollup -c即可正常完成打包，输出cjs、esm格式的组件产物和合并后的类型声明文件

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