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" } }
  1. graphsql 的使用方式

Page 中的 GQL 查询

export const query = graphql``

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

import { graphql } from "gatsby" export const query = graphql``
  1. 图片处理变更

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

import Img from "gatsby-image" export default function({{ data }}) { return <> <Img 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 的粉丝有过么?垃圾。

© 2022, Bill X.