upgrade gatsby from v2 to v4, lucky me

CI 构建一直报错，没有搭理，没成想 Gatsby 已经从 v2 升到了 v4，而主机环境也不再支持 NodeJS v12，不得已要升级一把，没想到拿来水了一篇，无耻。

下面是流水账

1. package.json

需要升级的依赖

{
  "dependencies": {
    "@deckdeckgo/highlight-code": "^3.6.0",
    "gatsby": "^4.0.0",
    "gatsby-plugin-google-analytics": "^4.15.0",
    "gatsby-plugin-image": "^2.15.0",
    "gatsby-plugin-manifest": "^4.15.0",
    "gatsby-plugin-react-helmet": "^5.15.0",
    "gatsby-plugin-sharp": "^4.15.0",
    "gatsby-plugin-styled-components": "^5.15.0",
    "gatsby-remark-highlight-code": "^3.2.0",
    "gatsby-remark-images": "^6.15.0",
    "prop-types": "^15.8.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
  },
  "devDependencies": {
    "prettier": "2.6.2"
  }
}

2. graphsql 的使用方式

Page 中的 GQL 查询

export const query = graphql``

不再支持使用全局变量 graphsql，而是需要手工从 gatsby 中 import.

import { graphql } from "gatsby"

export const query = graphql``

2. 图片处理变更

旧的动态图片处理方式已经宣告 deprecated

import Img from "gatsby-image"

export default function({{ data }}) {
  return <>
    <Img alt="..." fluid={{ ...data.file.childImageSharp.fluid }} />
  </>
}

export const query = graphql`
  query {
    file(
      relativePath: {
        eq: "xxx.jpg"
      }
    ) {
      childImageSharp {
        fluid(maxWidth: 1400, toFormat: WEBP) {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }`

取而代之的是，推荐使用 Gatsby 自己的图片处理方式，详情可以参考官方的手册。

安装

npm i gatsby-plugin-image

修改 gatsby-config.js，增加 gatsby-plugin-image

module.exports = {
  plugins: [
    `gatsby-plugin-image`,
    `gatsby-plugin-sharp`,
    `gatsby-transformer-sharp`, // Needed for dynamic images
  ],
}

修改页面中需要使用图片的地方，我这里主要是动态图片，可以裁剪，缩放，转换为 webp 格式等。

import { GatsbyImage } from "gatsby-plugin-image"

export default function({{ data }}) {
  return <>
    <GatsbyImage image={data.file.childImageSharp.gatsbyImageData} alt="..." />
  </>
}

export const query = graphql`
  query {
    file(
      relativePath: {
        eq: "xxx.jpg"
      }
    ) {
      childImageSharp {
        gatsbyImageData(layout: CONSTRAINED)
      }
    }
  }`

最后

竟然真的水了一篇，要是期刊论文这么容易水该有多好。

Gatsby 这种基于 React 的框架，要稳定下来，需要花费的心力远大于一站式的 Angular 方案。这还只是开始，一切“稳定”都是短暂的，随着 React 的升级、NodeJS 的升级、各种三方 Lib 的升级，甚至 HTML与 ES 标准的升级，都让这来之不易的“稳定”变得一文不值。

比如这次升级的动机，既不是自己手痒，也不是框架不行了，而是 CI 发现 NodeJS 12 不支持了，就强行中断了 CICD 过程，停摆了好久才发现。

而这种升级工作，是一步落后，步步落后，没有止境，没有尽头，非常无聊。这时候才会怀念 Angular 的好，框架层面大版本升级，一个 ng upgrade 就搞定，搞不定，官方会有详细指南，甚至小工具辅助你升级，让你跟上大部队，这种不离不弃的温暖，请问 React 的粉丝有过么？垃圾。