时间戳

首页 > 解决方案 > 在项目中使用两个不同的 React/React-Dom 版本

reactjs - 在项目中使用两个不同的 React/React-Dom 版本

问题描述

我处于一个非常奇怪的情况，项目结构如下所示：

迷你项目本身就是在 ruby​​ 容器中显示的反应应用程序。因此，当用户转到 /route1 时，它会加载 miniProject1 反应页面。当他们转到 /route2 时，它会转到 miniProject2 页面。

我的任务是更新 MiniProject2 的 react 版本，但不干扰 MiniProject1 或进行任何可能干扰 MiniProject1 的更改。

我按照如下方式安装了 react 和 react-dom：

 "react-latest": "npm:react@^16.13.1",
 "react-dom-latest": "npm:react-dom@^16.13.1",

这样我就可以专门在 MiniProject2 中导入最新版本

我面临的问题是 react-dom 具有“React”对等依赖项，它试图拉动项目反应而不是我的别名“react-latest”，这是有道理的，但现在我被困在试图弄清楚我如何强制 react-dom 要求我的 react-latest 别名而不是默认的 react peer 依赖项。

我也对潜在的 Webpack 配置解决方案持开放态度。

有什么想法吗？

标签： reactjsnpmwebpack

解决方案

经过一番挖掘，我能够通过执行以下操作来强制 react-dom 使用 react-latest：

包.json

"react": "^16.3.2",
"react-dom": "16.3.3",
"react-dom-latest": "npm:react-dom@^16.13.1",
"react-latest": "npm:react@^16.13.1",

webpack.config.js

module: {
rules: [
  {
    test: /\/node_modules\/react-dom-latest\/.*.js/,
    resolve: {
      alias: {
        react: path.resolve('./node_modules/react-latest')
      }
    }
  }]},

然后在我需要使用最新反应版本的文件顶部，我像这样导入反应：

import React from 'react-latest'
//or
import ReactDOM from 'react-dom-latest' //for your index

在我需要使用旧反应的文件上，我像这样导入反应：

import React from 'react'
//or
import ReactDOM from 'react-dom' //for your index

这就是所有需要做的！

免责声明：除非您必须并且别无选择，否则不要这样做。它会增加你的包的大小，因为你引入了两个不同版本的 react 和 reactDom

推荐阅读