upgrade gatsby from v4 to v5

upgrade gatsby from v4 to v5

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

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

以下是我的升级重点:

  1. NodeJS 升级至 v18
  2. Gatsby 升级至 5.11
  3. 有关插件升级至最新版本
  4. 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 才写完这点字,完蛋完蛋

© 2015-2024, Bill X.