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()）减少初始加载体积。 - 测试覆盖：共用代码需有完善的单元测试，避免影响下游项目。
以上方法可根据项目规模和技术栈灵活组合使用。
