Rollup构建NPM React组件时index.js为空且缺失CSS导入问题

问题1：构建产物仅含import 'react'，无组件代码 #

原因 #

入口文件src/index.ts使用export * from './components/modals/reactModal/Modal'导出，但Modal组件是通过export default定义的，export *语法无法导出模块的默认导出内容，导致Rollup判定没有需要打包的业务代码，仅保留了外部依赖的导入语句。

解决方法 #

修改入口文件，显式导出Modal的默认导出：

// src/index.ts
import Modal from './components/modals/reactModal/Modal';
export { Modal };

// 若希望用户通过`import Modal from 'your-package'`引入，可改为默认导出：
// export default Modal;

问题2：打包产物缺少import './index.css'，手动添加会被覆盖 #

原因 #

rollup-plugin-postcss开启extract: true后会将CSS提取为单独的index.css文件，但不会自动在JS产物中添加对应的CSS导入语句；且Rollup每次构建会重新生成JS文件，手动添加的内容会被覆盖。

解决方法 #

步骤1：调整Rollup配置

保留CSS提取逻辑，不自动注入样式：

import typescript from '@rollup/plugin-typescript';
import postcss from 'rollup-plugin-postcss';
import { defineConfig } from 'rollup';

export default defineConfig({
  input: 'src/index.ts',
  output: {
    dir: 'dist',
    format: 'es',
    name: 'beyonderui',
  },
  external: ['react', 'react-dom'],
  plugins: [
    postcss({ 
      include: '**/*.css', 
      extract: true, 
      minimize: true
    }),
    typescript({ tsconfig: 'tsconfig.json' }),
  ],
});

步骤2：在入口文件手动导入CSS源文件

让Rollup处理CSS依赖并自动关联提取后的产物：

// src/index.ts
// 导入组件的CSS源文件
import './components/modals/reactModal/css/Modal.module.css';
import './components/modals/reactModal/css/ModalAnimations.module.css';

import Modal from './components/modals/reactModal/Modal';
export { Modal };

可选：优化TypeScript路径解析

在tsconfig.json中添加模块解析配置，避免路径识别问题：

{
  "compilerOptions": {
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "target": "ES2020",
    "module": "ES6",
    "moduleResolution": "NodeNext",
    "declaration": true,
    "declarationDir": "dist",
    "strict": true,
    "esModuleInterop": true,
    "emitDeclarationOnly": false
  }
}

完成上述修改后，重新执行构建，dist目录下会生成：

• 包含组件代码和import './index.css'语句的index.js
• 提取后的压缩样式文件index.css
• 对应的TypeScript声明文件

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