GatsbyJS 教程

🌙
手机阅读
本文目录结构
axihe

写在前面

如果你的 JavaScript基础不好,那么推荐你看

原生JS的基础,会决定你可以走多远的重要因素!

前言

GatsbyJS 是一个现代化开发网站的网站产生系统,拥有完整、丰富且开源的生态圈。它利用 React + GraphQL 产生的多页面应用,让前端工程师,编辑,用户都感到满意。就让我们一步步地探索这个系统吧。

GatsbyJS

从技术的角度来说,GatsbyJS 就是把 React, react-router, webpack, babel 还有 GraphQL 的混合系统,达到数据层和 UI 层彻底分离,打造快速网站,而不失 SEO 的现代前端开发模式。

GatsbyJS 提供接口,让你可以轻松获取你的远端数据库。无论是传统的 Wordpress, 现代的 Contentful,突发奇想的 github CMS, 还是一个 json 档案,它都可以无痛地接入到这个系统里面。

透过系统提供的生命周期 hooks,你可以在其中将数据加工,处理,拼接,然后生成你所需要的数据源。

然后,你就可以使用 React 编写你喜欢的网站,加上自己的样式,预处理器,例如 SCSS,styled-components。

值得一提的是,你可以使用 React 的生命周期,例如,利用 lozad.js + React 打造一个懒加载图片的网站。

它可以生成静态页面,也就是说你生成的将会是一个完整的网站文件夹,只需要直接上传文件夹就可以把网站跑起来了。

使用系统的网站包括知名的 ReactJS.org 网站,Airbnb 旗下的 Engineering & Data Science 网站。

网站进化越来越复杂

在传统的全栈项目,我们需要把所有服务放在同一个平台,比如说 WordPress ,它提供一个一站式的内容管理,展示平台,大大方便了管理内容的人去开发博客,电商平台。然而,现在我们会细分系统架构,避免耦合性高,一个系统崩溃全崩溃的问题。

术业有专攻,不要造轮子

现在,我们会使用不同的服务来达到这件事情,例如我们会使用 algolia 来做搜寻服务, stripe 做付款服务,google analytics 做网站统计服务,travisCI 做自动化测试。

网站角色

以前,工程师需要负责开发前端视图层,维护后端数据库,优化网站性能等的工作,而现在,分工化让这些工序都可以由专门的人去负责,其中包括前端开发者,内容发布者,网站访问者,下面将会详细展开:

架构

GatsbyJS 打造了一个完整的生命周期,以及可以让开发者接入的插件模式。

如果我需要使用某些工具的话,我只需要在 gatsby-config.js 写入插件名称,然后 npm install 一下就好了。

GatsbyJS 拥有的丰富插件让开发者可以无痛地安装,移除插件,并且享受更加好的版本插件来避免版本过旧的版本特定问题。

React

为了避免大量的 DOM 操作而导致的网页性能问题,我们会使用 React 来操作虚拟 DOM,然后生成一个组件化的网站。

另外,为了避免重复造轮子,我们会使用组件化的开发方式。

Storybook

Storybook 可以提供一个快速入门的网站,展示系统里面的组件。

由于系统是使用 React,你可以快速地安装 Storybook 插件,例如在你的项目里面使用 npx 命令:npx -p @storybook/cli sb init

Webpack

这个在现代化前端工程里面很常见,这里简单说一下:它打包不同的 html, js, css 文件,然后把他们压缩,加密,劣化,让我们可以放到 CDN 上面。

Babel

为了兼容不同浏览器支持的 JavaScript 版本,我们可以使用 Babel。例如说将 async/await 向下兼容到 promise。如果你想了解关于异步操作,文章。

ESLint

我们可以使用代码风格检测,校正工具例如 ESLint,来统一团队的代码风格,不但可以避免 Git 操作上面的不必要更改,还可以避免犯下低级错误,例如拼写,函数变量创建但未使用。

版本管理

我们会使用 Git 来达到版本管理,开分支,合拼分支,然后跑自动化测试,最后部署。

万一有问题,我们还可以快速的使用二分法排查版本错误,然后通知网站维护者(自己)进行版本回退。

我们可以使用 Webhooks 让编辑改完文章后发送请求到 Netlify 来达到自动测试,部署,发布的流程。

后记

透过 GatsbyJS,我可以享受架构前端项目的乐趣,拥抱开源社区的优势,不断改进我的博客框架。

而透过 Netlify,我可以享受到服务器不中断下发布新网站,而且可以提供校对版本给校对者,然后才发布文章。就算是有问题也可以快速后退,DEBUG,然后发布。

参考链接


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

Bilibili(B站)

朱安邦

Anbang