Gatsby 3.13 + Strapi 3.6 + React-markdown 故障排查

美好的十一国庆节假期,陪孩子、睡懒觉、看各种前端资料。儿子5岁了,再也不用像之前那样寸步不离,他会找自己喜欢玩的东西。就算是缠着我下楼玩,也不用我时时刻刻的当他的拐棍,特别是他最近社交技能提升,玩秋千会排队、会交涉,也会抢,为父甚是欣慰。

言归正传,这几天以 Strapi 为数据源,分别试用了 Next.js 和 Gatsby 两款开源的前端框架。首先说 Strapi,真乃神器!本质上他是一个内容管理器 CMS,但与传统的 CMS 不同在于它不直接提供前端界面,只按照需求对外暴漏 API,它的逻辑非常灵活,你可以用预置的各种字段去组装需要的内容类型。可以很轻松的创建各种单页面、文章博客或是产品列表,然后直接在 Strapi 上面管理相应的内容,它通过 API 对外提供各种内容类型的数据,使用 react 或 vue 等前端框架从 API 获取数据就可以了。

strapi-admin

Strapi 在 M1 芯片的 macbook 上安装有些小问题,在编译 sqlite3 的时候会报错,由于忘了具体的故障细节,这里就没办法记录了,不过很容易就解决了,等下次再碰到再补充。

有了 Strapi 作为数据源,接下来就是前端框架了,由于最近比较迷恋 tailwindcss 所以前端框架选择了 taiwind 匹配良好的 Next.js 和 Gatsby。

Next.js 很棒,就是那种你一下就装上了,一下就能用起来的东西。从 Strapi 获取和显示数据也非常简单,搭配 react-markdown 可以很灵活的显示包含 markdown 格式内容的字段。作为一个练习,我用 Next.js 重写了 to8.cn 塔罗牌程序。但 Next.js 导出静态页面的效果不符合我的预期,个人感觉它更适合作服务端渲染的程序。

Gatsby 也很棒,安装和使用也像 Next.js 一样简单。这也是为什么大家经常愿意用它们两个进行对比的原因,都基于 React 开发,都是非常好用的前端框架。但 Gatsby 提供了插件机制,可以通过各种插件扩展功能,比如通过 gatsby-plugin-mdx 插件就能实现对 markdown 文件的解析,轻松实现基于 markdown 的文档站或博客。更让我满意的是 Gatsby 的静态内容生成能力,可以无缝的把 Strapi 上的内容生成出开发一致的静态版本。

不过 Gatsby v3.13 在结合 react-markdown 使用时会报一系列错误。只要在页面中引入 react-markdown 就会报错。错误的主要原因是最新版的 react-markdown 与 webpack 5 还没有适配良好,需要手动调整配置让它正常工作。具体的解决方式如下:

在安装了 react-markdown 之后,还需要安装几个包:

$ yarn add assert util process

由于 Gatsby 不支持 webpack.config.js 配置文件,创建和调整 webpack 的配置需要在项目根目录创建 gatsby-node.js 文件:

const webpack = require('webpack')

exports.onCreateWebpackConfig = ({ actions }) => {
    actions.setWebpackConfig({
     resolve: {
        fallback: {
            assert: require.resolve("assert/"),
            util: require.resolve("util/"),
        },
      },
      plugins: [
        new webpack.ProvidePlugin({
               process: 'process/browser',
        }),
     ],
    })
  }

然后再启动服务器,react-markdown 就能正常解析显示从 strapi 读取到的包含 markdown 的内容了。

目测 Gatsby 应该是接下来我在工作中会主要采用的前端框架,由内而外的适合我们的工作需求。衷心的希望所有这些优秀的开源产品都能持续进步,找到合适的盈利方式。

References