【REACT16】react老项目版本依赖适配问题

风清云淡_A2025-11-02 11:08

现在react已经升级到v19了,但又很多老项目版本还停滞在16.x

记录下在用react16创建新项目的时候版本依赖问题

package文件版本号

json 复制代码

{
  "name": "ms-bike-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "react": "^16.3.2",
    "react-dom": "^16.3.2",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "react-scripts": "^5.0.1"
  },
  "scripts": {
    "dev": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": []
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@craco/craco": "^6.2.0",
    "craco-less": "^3.0.1",
    "less-loader": "^4.1.0"
  }
}

覆盖cra的默认配置

react-scripts用最新的即可

在首页新建一个craco.config.js配置文件，使用cjs格式

我们在项目中使用的css预处理语言是less,所以直接这样配置使得less文件生效

js 复制代码

const CracoLessPlugin = require('craco-less');
module.exports = {
    plugins: [
        {
            plugin: CracoLessPlugin,
            options: {
                lessLoaderOptions: {
                    lessOptions: {
                        modifyVars: { '@primary-color': '#1DA57A' },
                        javascriptEnabled: true,
                    },
                },
            },
        },
    ],
}

测试效果

这样就不用eject出cra隐藏的配置文件了，后面就可以按需自定义配置文件了

引入antd

正确的版本

bash 复制代码

"antd": "^4.24.16",

其他版本会报错，没试过v5的，查资料说可以支持，可是自己试下

引入的文件必须是less格式才生效

js 复制代码

import 'antd/dist/antd.less';

下面的方式有问题的，会报错,但是也生效，就是控制台看着很乱

js 复制代码

import 'antd/dist/antd.css';