依赖Redux的Create React App打包为NPM包的可行性咨询

你完全可以把依赖Redux的Create React App打包成NPM包，在其他Redux站点中复用。不过需要合理处理依赖关系和打包配置，避免出现版本冲突或状态不同步的问题，下面是具体的实践指南：

一、正确处理Redux依赖：用Peer Dependencies代替常规依赖 #

• 把Redux相关依赖设为peerDependencies：在你的包的package.json里，将redux、react-redux（如果用到）放到peerDependencies字段，而不是dependencies。这样做是让使用你包的宿主项目提供这些依赖，避免重复安装多个Redux版本，防止出现多个store实例导致的状态隔离问题。
  示例配置：

  {
    "peerDependencies": {
      "redux": "^4.0.0 || ^5.0.0",
      "react-redux": "^7.0.0 || ^8.0.0",
      "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
    }
  }
  

• 不要在包内创建独立的Redux Store：你的包应该依赖宿主项目的Redux Store，通过connect或者Redux Toolkit的useSelector/useDispatch来连接到宿主的store。如果你的包需要添加自定义reducer，应该提供一个reducer函数，让宿主项目将其合并到自己的root reducer中。

二、调整Create React App的打包配置为库模式 #

Create React App默认是为单页应用打包的，需要改成库模式：

• 添加库模式打包命令：在package.json的scripts中新增一条打包命令：

  {
    "scripts": {
      "build:lib": "react-scripts build --lib --name YourComponentLib --out-dir dist"
    }
  }
  

  这个命令会把你的代码打包成可复用的库文件，输出到dist目录。如果你的react-scripts版本较低，也可以用Babel手动编译：

  {
    "scripts": {
      "build:lib": "rm -rf dist && NODE_ENV=production npx babel src --out-dir dist --copy-files"
    }
  }
  

• 只导出需要的内容：在src/index.js里，只导出你的可复用组件、reducers、actions等核心内容，不要导出整个App或者创建store的逻辑。

三、宿主项目的使用示例 #

当其他项目安装你的包后，只需要简单几步就能集成：

1. 确保宿主项目已经安装了符合你peerDependencies版本要求的Redux和react-redux
2. 将你的包的reducer合并到宿主的root reducer：

   import { combineReducers } from 'redux';
   import yourPackageReducer from 'your-package-name/reducers';
   
   const rootReducer = combineReducers({
     // 宿主自身的reducers
     yourPackageNamespace: yourPackageReducer
   });
   

3. 在宿主组件中直接使用你的包的组件，它们会自动连接到宿主的Redux Store：

   import { YourReusableComponent } from 'your-package-name';
   
   function HostPage() {
     return <YourReusableComponent />;
   }
   

四、需要避开的常见坑点 #

• 绝对不要在包内创建Store实例：如果你的包自己创建了createStore，会和宿主的store完全隔离，导致状态不同步，这是最容易踩的坑。
• 明确版本兼容范围：在peerDependencies里指定合理的版本范围，确保你的包能兼容宿主项目使用的Redux版本。
• 打包时排除冗余代码：用库模式打包，确保最终产物只包含你的组件和业务逻辑，不包含React或Redux的代码——这些都由宿主项目提供。

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