站点升级到Gatsby v5

最近几天从Gatsby v4升级到Gatsby v5了，由于我的网站结构比较简单，所以升级过程也比较顺利，就几个地方简单记录下。

首先必读官方文档：Migrating from v4 to v5。我根据官方文档做了一点总结。

Gatsby v4 升级到 v5 注意事项

主要是环境依赖，必须是 Node.js 18 以上，当然Gatsby v5也是要求 React 18 以上的，还有一点Gatsby v5没做ESM的浏览器兼容处理。

依赖更新

运行 npm outdated 或者 yarn upgrade-interactive 检查现有的项目依赖版本，根据个人需要进行升级。

GraphQL

这个用了 GraphQL v16 ，在某些写法上有所调整，不过最大的变化是启动项目后可以看到查询工具（GraphiQL）的UI变好看了，也变得好用了~

其他涉及到代码部分不多，就下面这两：

Sort部分的写法有所调整，更简单明了了
Aggregation也有调整

trailingSlash

从 gatsby@4.7.0 增加了这个选项，具体细节参考：https://www.gatsbyjs.com/docs/reference/config-files/gatsby-config/#trailingslash。

不过根据WordPress的习惯，我将其改成了 never 。

其他变更

还有些没有涉及到的内容，这里就一带而过了。

graphqlTypegen 个人理解为：GraphQL的类型生成器，就像是写TS的感觉？
Promise 的polyfill配置
Mapping node types 个人理解为：站内的页面数据查询的一种关联模式
Proxy 代理
jsxRuntime 和 jsxImportSource React的特性

个人项目相关的问题

移除了一些依赖包： prop-types ， react-helmet ， gatsby-plugin-react-helmet ， gatsby-plugin-fontawesome-css ，其中这里面就有点要说的了，也是花了比较多的时间进行改造了。

Gatsby Head API vs react-helmet

这个 react-helmet 和 gatsby-plugin-react-helmet 用了很久了，早期是用于 gatsby@4.19.0 之前版本往head里面添加内容的能力。但是在之后的版本中，诞生了Gatsby Head API，完全可以取代之前的方法了。所以我也仔细研究了新的写法，对我之前的主要页面 layout.js 、 seo.js 和相关单页进行了调整。

Font Awesome

我将 Font Awesome 也升级到了最新的6.x版本，但结合插件 gatsby-plugin-fontawesome-css 时，会有个兼容警告，而 gatsby-plugin-fontawesome-css 最早在 Font Awesome v5 版本运行良好，是解决因页面动态加载svg样式造成的icon巨大闪动的问题，查看DEMO，但是在新的 Font Awesome v6 中如何解决这个问题呢？

其实最简的办法就是直接在你的Gatsby项目中添加一段全局样式：

.svg-inline--fa {
  display: inline-block;
  font-size: inherit;
  height: 1em;
  overflow: visible;
  vertical-align: -0.125em;
}

这样问题就基本解决了。更多探索和研究，我后面会在另一个篇文章中细说。

总结

到最后回想最早搭建Gatsby的时候还是用的v3转眼两三年过去了，一下子到了v5。到现在我还是React渣渣，只能说这个项目上手太简单了，也只能说我的学习和理解能力太强了哈哈哈，即便遇到关于React相关的问题，看看文档很快就理解了。

下一步任务就是考虑抽空重新设计整个博客，从美观性和体验上进一步提升啦。当然React 18还是要抽空再多学习多实践，其实学习一门语言或者框架，真正的意义在于发现它的设计思想和某些精妙的实现方式，这才是真正提高一个开发者能力深度的方式~