react如何共用依赖

共用依赖的方法

在React项目中，可以通过多种方式实现依赖的共用，以减少重复代码和优化打包体积。以下是几种常见的方法：

使用Monorepo结构
通过工具如Lerna或Yarn Workspaces管理多个项目，将共用依赖提升到根目录的node_modules中。配置package.json的workspaces字段：

{
  "workspaces": ["packages/*"]
}

通过NPM/Yarn链接本地包
在开发阶段，使用npm link或yarn link将本地依赖包链接到多个项目中。先在依赖包目录运行：

yarn link

然后在项目目录中链接：

yarn link <package-name>

发布私有NPM包
将共用代码封装为独立的NPM包，发布到私有仓库（如Verdaccio）或公共仓库。其他项目通过package.json直接引用：

{
  "dependencies": {
    "shared-utils": "^1.0.0"
  }
}

使用Webpack Module Federation
适用于微前端架构，通过Webpack 5的模块联邦动态加载远程模块。配置示例：

// host配置
new ModuleFederationPlugin({
  name: "host",
  remotes: {
    app1: "app1@http://localhost:3001/remoteEntry.js"
  }
});

提取公共依赖到CDN
通过externals配置将React等基础库排除打包，改为从CDN引入。Webpack配置示例：

externals: {
  react: "React",
  "react-dom": "ReactDOM"
}

注意事项

• 版本一致性：确保所有项目使用相同版本的共用依赖，避免兼容性问题。
• 构建优化：通过代码分割（如动态import()）减少初始加载体积。
• 测试覆盖：共用代码需有完善的单元测试，避免影响下游项目。

以上方法可根据项目规模和技术栈灵活组合使用。