upgrade gatsby from v4 to v5

August 15, 2023

距离上一次升级居然已经过去了一年有余，时光匆匆，这过去的一年也居然什么都没有写，惭愧惭愧。

看到 gatsby 大版本已经来到了 5.0，跟还是不跟这个没有疑问，跟！本次升级难度不大，基本上就是按照官方的指导，升级 gatsby 自身，但是由于其插件体系庞大，用到了哪些插件，它们怎么跟这个大版本升级，是个比较麻烦的事情。

以下是我的升级重点：

NodeJS 升级至 v18
Gatsby 升级至 5.11
有关插件升级至最新版本
gatsby-image 插件废弃删除

package.json

{
  "dependencies": {
    "@deckdeckgo/highlight-code": "^3.6.0",
-   "bootstrap": "^5.0.0-beta1",
-   "bootstrap-icons": "^1.2.2",
+   "bootstrap": "^5.3.0",
+   "bootstrap-icons": "^1.10.0",
    "cross-env": "^7.0.3",
    "date-fns-tz": "^1.0.12",
    "dotenv": "^8.2.0",
-   "gatsby": "^4.0.0",
+   "gatsby": "^5.11.0",
    "gatsby-image": "^2.8.0",
    "gatsby-plugin-disqus": "^1.2.2",
-   "gatsby-plugin-google-analytics": "^4.15.0",
+   "gatsby-plugin-google-analytics": "^5.0.0",
-   "gatsby-plugin-image": "^2.15.0",
+   "gatsby-plugin-image": "^3.0.0",
-   "gatsby-plugin-manifest": "^4.15.0",
+   "gatsby-plugin-manifest": "^5.0.0",
-   "gatsby-plugin-react-helmet": "^5.15.0",
+   "gatsby-plugin-react-helmet": "^6.0.0",
-   "gatsby-plugin-react-svg": "^3.0.0",
+   "gatsby-plugin-react-svg": "^3.3.0",
-   "gatsby-plugin-robots-txt": "^1.5.5",
+   "gatsby-plugin-robots-txt": "^1.8.0",
-   "gatsby-plugin-sharp": "^4.15.0",
+   "gatsby-plugin-sharp": "^5.0.0",
-   "gatsby-plugin-sitemap": "^5.15.0",
+   "gatsby-plugin-sitemap": "^6.0.0",
-   "gatsby-plugin-styled-components": "^5.15.0",
+   "gatsby-plugin-styled-components": "^6.0.0",
-   "gatsby-remark-highlight-code": "^3.2.0",
+   "gatsby-remark-highlight-code": "^3.3.0",
-   "gatsby-remark-images": "^6.15.0",
+   "gatsby-remark-images": "^7.0.0",
    "gatsby-remark-relative-images": "^2.0.2",
-   "gatsby-remark-responsive-iframe": "^5.15.0",
+   "gatsby-remark-responsive-iframe": "^6.0.0",
-   "gatsby-source-filesystem": "^4.15.0",
+   "gatsby-source-filesystem": "^5.0.0",
-   "gatsby-transformer-remark": "^5.14.0",
+   "gatsby-transformer-remark": "^6.0.0",
-   "gatsby-transformer-sharp": "^4.15.0",
+   "gatsby-transformer-sharp": "^5.0.0",
    "lodash": "^4.17.20",
    "prop-types": "^15.8.1",
-   "react": "^17.0.1",
+   "react": "^18.2.0",
-   "react-dom": "^17.0.1",
+   "react-dom": "^18.2.0",
    "react-helmet": "^6.1.0",
    "replace-in-file": "^6.1.0",
-   "styled-components": "^5.2.1"
+   "styled-components": "^6.0.0"
  }
}

tags.js

graphql 语法中 sort 部分需要调整，整站都需要修改。

export const pageQuery = graphql`
  query($tag: String) {
    allMarkdownRemark(
      limit: 100
-     sort: { fields: [frontmatter___date], order: DESC }
+     sort: {frontmatter: {date: DESC}}
      filter: { frontmatter: { tags: { in: [$tag] } } }
    ) {
      totalCount
      edges {
        node {
          frontmatter {
            title
            date(formatString: "MMMM, YYYY")
            tags
          }
          fields {
            slug
          }
        }
      }
    }
  }
}

起草日期 8-15, 拖到了 9-7 才写完这点字，完蛋完蛋

Blog

upgrade gatsby from v4 to v5