开发React库期间，如何在测试项目中使用本地React库？

第一步操作的正确性 #

你执行的npm link ../my-react-library操作是正确的，从npm ls的输出也能确认全局链接已成功建立，测试项目已经关联到你的本地React库开发目录。

后续需要完成的操作 #

1. 解决React多实例冲突问题 #

React项目中如果同时存在多个React实例（测试项目自带的React + 链接库依赖的React），会引发hooks报错、组件渲染异常等问题。需要让链接的库复用测试项目的React实例：

• 进入本地库目录my-react-library，执行命令：

  npm link ../my-test-project/node_modules/react
  

  同理，如果库依赖react-dom，也需要执行同样的链接命令：

  npm link ../my-test-project/node_modules/react-dom
  

2. 配置测试项目的打包工具转译源码 #

测试项目的打包工具（如Create React App、Vite、Webpack）默认不会转译node_modules内的代码，但你链接的是未构建的源码目录，因此需要配置工具处理该库的代码：

若使用Create React App：

• 安装依赖：

  npm install --save-dev react-app-rewired customize-cra
  

• 在项目根目录创建config-overrides.js文件，添加转译规则：

  const { override, addBabelLoader } = require('customize-cra');
  
  module.exports = override(
    addBabelLoader({
      test: /\.(js|jsx|ts|tsx)$/,
      include: /my-react-library/,
      exclude: /node_modules/,
    })
  );
  

• 修改package.json中的启动命令，替换为react-app-rewired：

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  }
  

若使用Vite：

• 修改vite.config.js，允许访问外部库目录并跳过预构建：

  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
    server: {
      fs: {
        allow: ['../my-react-library'],
      },
    },
    optimizeDeps: {
      exclude: ['my-react-library'],
    },
  });
  

若使用Webpack：

• 修改webpack.config.js，添加针对库的转译规则：

  const path = require('path');
  
  module.exports = {
    // ...其他配置
    module: {
      rules: [
        {
          test: /\.(js|jsx|ts|tsx)$/,
          include: path.resolve(__dirname, '../my-react-library'),
          use: ['babel-loader'],
        },
        // ...其他已有规则
      ],
    },
  };
  

3. 检查库的package.json配置 #

确认my-react-library的package.json配置符合要求：

• main字段指向源码入口文件（如src/index.js），而非构建后的产物；如果是TypeScript库，需确保types字段指向源码类型文件。
• peerDependencies中包含react和react-dom，且版本范围与测试项目的React版本兼容。

4. 重启测试项目开发服务 #

修改配置后，必须重启测试项目的开发服务器，新配置才会生效。之后修改库的代码就能实时同步到测试项目中。

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