如何将Rollup构建的React组件库不发布至npm直接导入其他项目？

方法1：本地文件依赖（单一命令实现） #

这是最直接的方案，无需额外工具，只需修改目标项目的配置并执行安装命令：

1. 确保组件库已完成Rollup构建，且组件库根目录的package.json正确配置入口字段，指向构建后的输出文件，示例：

   {
     "main": "./dist/index.cjs.js",
     "module": "./dist/index.esm.js",
     "exports": {
       ".": {
         "require": "./dist/index.cjs.js",
         "import": "./dist/index.esm.js"
       }
     }
   }
   

2. 在目标React项目的package.json中添加本地依赖：

   "dependencies": {
     "your-component-lib": "file:../relative-path-to-your-component-library"
   }
   

3. 执行安装命令：

   npm install # 或 yarn install / pnpm install
   

完成后即可像使用正常npm包一样导入组件：

import { Button, Card } from 'your-component-lib';

方法2：修复npm link无效问题 #

如果之前npm link失败，大概率是React双实例冲突导致的，按以下步骤修复：

1. 在组件库目录执行：

   npm link
   

2. 在目标项目目录执行：

   npm link your-component-lib
   

3. 关键操作：解决React peer依赖冲突，将目标项目的React链接到组件库，避免两个React实例共存：

   npm link ../your-component-lib/node_modules/react
   

4. 确保组件库的Rollup配置已排除React和ReactDOM，避免打包进组件库：

   // rollup.config.js
   export default {
     // ...其他配置
     external: ['react', 'react-dom'],
     output: {
       // ...输出配置
       globals: {
         react: 'React',
         'react-dom': 'ReactDOM'
       }
     }
   }
   

方法3：Monorepo工作流（适合长期维护） #

若需频繁迭代组件库和项目，推荐用pnpm/yarn的Workspace功能：

1. 将组件库和目标项目放在同一根目录下，目录结构示例：

   root/
     packages/
       your-component-lib/
     apps/
       your-react-app/
   

2. 在根目录创建pnpm-workspace.yaml（pnpm）或配置package.json（yarn）：

   # pnpm-workspace.yaml
   packages:
     - 'packages/*'
     - 'apps/*'
   

3. 在根目录执行安装命令：

   pnpm install
   

之后在目标项目中可直接导入组件库，无需额外配置，且依赖会自动共享，避免重复安装。

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