如何将Gatsby从V4降级到最新V3版本并安装所有兼容依赖

完全可以实现所有依赖适配Gatsby V3，按以下步骤操作即可：

• 第一步：清理旧的依赖文件与缓存
  执行以下命令删除冗余文件，避免版本冲突：

  # macOS/Linux 执行
  rm -rf node_modules package-lock.json yarn.lock .cache public
  # Windows 执行
  rmdir /s /q node_modules .cache public
  del package-lock.json yarn.lock
  

• 第二步：修改package.json中Gatsby相关依赖版本
  所有gatsby开头的官方包大版本要和Gatsby核心版本对应，直接将以下字段替换到你的package.json对应位置即可：

  "dependencies": {
    "@babel/plugin-transform-typescript": "^7.16.1",
    "@styled-icons/boxicons-regular": "^10.38.0",
    "@types/node": "^16.11.7",
    "@types/react": "^17.0.34",
    "@types/react-helmet": "^6.1.4",
    "gatsby": "^3.14.6",
    "gatsby-plugin-gatsby-cloud": "^3.14.0",
    "gatsby-plugin-image": "^1.14.2",
    "gatsby-plugin-manifest": "^3.14.0",
    "gatsby-plugin-offline": "^4.14.0",
    "gatsby-plugin-react-helmet": "^4.14.0",
    "gatsby-plugin-sharp": "^3.14.3",
    "gatsby-source-filesystem": "^3.14.0",
    "gatsby-transformer-sharp": "^3.14.0",
    "plop": "^2.7.6",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-icons": "^4.3.1",
    "react-markdown": "^7.1.0",
    "rehype-raw": "^6.1.0",
    "styled-components": "^5.3.3",
    "styled-media-query": "^2.1.2",
    "swiper": "^7.2.0",
    "tslint": "^6.1.3",
    "typescript": "^4.4.4"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@react-icons/all-files": "^4.1.0",
    "@storybook/addon-actions": "^6.3.12",
    "@storybook/addon-essentials": "^6.3.12",
    "@storybook/addon-links": "^6.3.12",
    "@storybook/builder-webpack5": "^6.3.12",
    "@storybook/manager-webpack5": "^6.3.12",
    "@storybook/react": "^6.3.12",
    "@types/react-dom": "^17.0.11",
    "@types/styled-components": "^5.1.15",
    "@types/swiper": "^5.4.3",
    "@typescript-eslint/eslint-plugin": "^5.3.1",
    "@typescript-eslint/parser": "^5.3.1",
    "babel-loader": "^8.2.3",
    "babel-plugin-styled-components": "^1.13.3",
    "chromatic": "^6.0.6",
    "eslint": "^8.2.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-react": "^7.27.0",
    "eslint-plugin-react-hooks": "^4.3.0",
    "gatsby-plugin-scss-typescript": "^4.14.0",
    "gatsby-plugin-styled-components": "^4.14.0",
    "gatsby-plugin-typescript-scss-modules": "^1.0.7",
    "prettier": "^2.4.1",
    "storybook-addon-gatsby": "^0.0.2"
  }
  

  以上所有Gatsby相关包均为V3适配的最新稳定版本，其余非Gatsby依赖保留你原有的版本即可，均兼容Gatsby V3环境。
• 第三步：重新安装依赖并验证
  执行npm install或yarn install安装依赖，安装完成后运行gatsby develop启动项目，无报错即说明降级成功。如果遇到个别第三方插件的依赖冲突，查询对应插件的V3适配版本替换即可。

内容的提问来源于stack exchange，提问作者Arthur