正文

轻松搭建React多版本开发环境，轻松切换项目版本，告别版本冲突烦恼

/0 浏览量
0824

在React的开发过程中，有时候需要同时使用不同版本的React来满足不同项目的需求。但是，不同版本的React之间可能会存在兼容性问题，导致开发环境搭建复杂，版本冲突频繁。本文将介绍如何轻松搭建React多版本开发环境，并实现项目的版本切换，让你告别版本冲突的烦恼。

1. 使用nvm管理Node.js版本

nvm（Node Version Manager）是一个Node.js版本管理工具，可以方便地安装和切换Node.js版本。以下是使用nvm管理Node.js版本的步骤：

  1. 安装nvm：在终端中运行以下命令（以macOS为例）：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
  1. 添加nvm到环境变量：在终端中运行以下命令：
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
  1. 安装指定版本的Node.js：在终端中运行以下命令，安装指定版本的Node.js：
nvm install 14.17.0
  1. 切换Node.js版本：在终端中运行以下命令，切换到指定版本的Node.js：
nvm use 14.17.0

2. 使用create-react-app创建项目

使用create-react-app脚手架工具可以快速创建React项目。以下是使用create-react-app创建项目的步骤：

  1. 确保已经安装了Node.js和npm：在终端中运行以下命令检查：
node -v
npm -v
  1. 安装create-react-app：在终端中运行以下命令安装create-react-app：
npm install -g create-react-app
  1. 创建项目：在终端中运行以下命令创建项目，并指定项目名称：
create-react-app my-react-app
  1. 进入项目目录：在终端中运行以下命令进入项目目录：
cd my-react-app

3. 使用react-app-rewired配置React版本

react-app-rewired是一个用于修改create-react-app项目配置的插件。以下是使用react-app-rewired配置React版本的步骤：

  1. 安装react-app-rewired和customize-cra：在项目目录中运行以下命令安装这两个插件：
npm install react-app-rewired customize-cra --save-dev
  1. 创建config-overrides.js文件：在项目根目录下创建config-overrides.js文件，并添加以下内容：
const { override, addBabelPresets } = require('customize-cra');

module.exports = override(
  addBabelPresets([
    ['react-app', {
      'babel-plugin-transform-react-jsx': {
        'pragma': 'JSX',
        'pragmaFrag': 'Fragment'
      }
    }]
  ])
);
  1. 修改package.json文件：在项目根目录下修改package.json文件，将"scripts"部分中的"start"和"build"命令修改为以下内容：
"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-app-rewired eject"
}
  1. 使用react-app-rewired启动项目：在终端中运行以下命令启动项目：
npm start

4. 切换React版本

要切换React版本，只需要修改config-overrides.js文件中的Babel插件配置。以下是切换React版本的示例：

  1. 修改config-overrides.js文件中的Babel插件配置：
module.exports = override(
  addBabelPresets([
    ['react-app', {
      'babel-plugin-transform-react-jsx': {
        'pragma': 'JSX',
        'pragmaFrag': 'Fragment'
      }
    }],
    ['react-app', {
      'babel-plugin-transform-react-jsx': {
        'pragma': 'JSX',
        'pragmaFrag': 'Fragment',
        'version': '16.8.6' // 指定React版本
      }
    }]
  ])
);
  1. 使用react-app-rewired启动项目：在终端中运行以下命令启动项目：
npm start

此时，项目将使用指定的React版本进行编译和运行。

总结

通过以上步骤，你可以轻松搭建React多版本开发环境，并实现项目的版本切换。使用nvm管理Node.js版本、使用create-react-app创建项目、使用react-app-rewired配置React版本，让你告别版本冲突的烦恼，专注于React开发。

-- 展开阅读全文 --