Gatsby框架的缺点

2022-03-08T00:00:00+00:00

Gatsby.js</a>是一个基于 React 生成静态网站的工具链，也称为静态网站生成器(SSG), 旨在让开发人员使用基于 React</a> 的框架和基于 Gaphql</a> 的数据层去构建快速、安全且功能强大的网站，从而将不同的内容、API 和服务生成一个体验良好的静态网站。

我第一眼看到它的时候就被它简单的思想和丰富的社区生态给吸引了。总体来讲，他是一切皆 source，source 生成一个 graphql 的 API，然后在 react 组件里按需使用 graphql 的数据以生成对应的页面。

目前我的 Wiki</a>, Blog</a>, 包括 Buzzing</a>里面的所有子攒点, Track Awesome List</a>，其实都是用 Gatsby 构建的。

随着内容越来越多，以及 Gatsby 的升级，我发现在维护 Gatsby 的时候开始有点不喜欢它了。这主要是由于：

Gatsby 的大多数功能都是通过插件提供，导致项目有大量的第三方依赖（也有很多是官方维护的插件），而 Nodejs 的

package-lock.json</code>总是在升级的时候搞错一些版本，让我很抓狂（我不确定这个问题有没有得到解决），对于多依赖项目，我经常需要删掉整个
lock 文件，然后重新生成新的 lock 索引。</li>

Gatsby 虽然思想简单，但是其 API 现在已经变得非常庞大和复杂了，有点类似
Webpack，一个东西只要变得如此复杂，那么后期维护一定会很痛苦。与之相对的是11ty</a>的 API
就很简单，但是也很强大。</li>
</ol>
最后，来体会一下我的项目中 Gatsby 的依赖：</p>
{
</span>  "</span>@emotion/react</span>": "</span>^11.7.1</span>",
</span>  "</span>@emotion/styled</span>": "</span>^11.6.0</span>",
</span>  "</span>@mdx-js/mdx</span>": "</span>^1.6.22</span>",
</span>  "</span>@mdx-js/react</span>": "</span>^1.6.22</span>",
</span>  "</span>@theme-ui/prism</span>": "</span>^0.13.0</span>",
</span>  "</span>date-fns</span>": "</span>^2.28.0</span>",
</span>  "</span>disqus-react</span>": "</span>^1.1.2</span>",
</span>  "</span>gatsby-core-utils</span>": "</span>^3.4.0</span>",
</span>  "</span>gatsby-plugin-emotion</span>": "</span>^7.4.0</span>",
</span>  "</span>gatsby-plugin-feed</span>": "</span>^4.4.0</span>",
</span>  "</span>gatsby-plugin-hn</span>": "</span>^1.0.0</span>",
</span>  "</span>gatsby-plugin-image</span>": "</span>^2.4.0</span>",
</span>  "</span>gatsby-plugin-instagram</span>": "</span>^1.0.0</span>",
</span>  "</span>gatsby-plugin-mdx</span>": "</span>^3.4.0</span>",
</span>  "</span>gatsby-plugin-react-helmet</span>": "</span>^5.4.0</span>",
</span>  "</span>gatsby-plugin-sharp</span>": "</span>^4.4.0</span>",
</span>  "</span>gatsby-plugin-theme-ui</span>": "</span>^0.13.0</span>",
</span>  "</span>gatsby-plugin-twitter</span>": "</span>^4.4.0</span>",
</span>  "</span>gatsby-remark-copy-linked-files</span>": "</span>^5.4.0</span>",
</span>  "</span>gatsby-remark-images</span>": "</span>^6.4.0</span>",
</span>  "</span>gatsby-remark-smartypants</span>": "</span>^5.4.0</span>",
</span>  "</span>gatsby-theme-i18n</span>": "</span>^3.0.0</span>",
</span>  "</span>gatsby-theme-ui-preset</span>": "</span>^3.0.0</span>",
</span>  "</span>gatsby-theme-ui-timeline-preset</span>": "</span>^3.0.1</span>",
</span>  "</span>gatsby-transformer-json</span>": "</span>^4.4.0</span>",
</span>  "</span>gatsby-transformer-sharp</span>": "</span>^4.4.0</span>",
</span>  "</span>html-to-text</span>": "</span>^8.1.0</span>",
</span>  "</span>mdx-utils</span>": "</span>^0.2.0</span>",
</span>  "</span>path-browserify</span>": "</span>^1.0.1</span>",
</span>  "</span>react-helmet</span>": "</span>^6.1.0</span>",
</span>  "</span>react-player</span>": "</span>^2.9.0</span>",
</span>  "</span>react-process-string</span>": "</span>^1.2.0</span>",
</span>  "</span>react-twemoji</span>": "</span>^0.3.0</span>",
</span>  "</span>react-ultimate-pagination</span>": "</span>^1.2.0</span>",
</span>  "</span>remark-slug</span>": "</span>^5.1.2</span>",
</span>  "</span>theme-ui</span>": "</span>^0.13.0</span>",
</span>  "</span>url-join</span>": "</span>^4.0.1</span>"
</span>}
</span></code></pre>

Owen的博客 - Javascript

收集 Javascript 相关的资源

Algorithms 🔗</a></h2>

youtube js algorithms crash course</a></li> </ul>
常用代码 🔗</a></h2>
`// create a 2d array </span>Array</span>.</span>from</span>(</span>Array</span>(</span>2</span>), () </span>=></span>Array</span>(</span>4</span>)) </span> </span></code></pre>`

常用代码 🔗</a></h2>
`// create a 2d array </span>Array</span>.</span>from</span>(</span>Array</span>(</span>2</span>), () </span>=></span>Array</span>(</span>4</span>)) </span> </span></code></pre>`

Gatsby框架的缺点