GatsbyJS的实践

前端小工
380 阅读8分钟

GatsbyJS的实践

介绍如何使用基于React的友好、易用的静态网站生成器来构建网站。

  • Share on Facebook
  • Share on Twitter
  • Share on LinkedIn
  • Share on Reddit
  • Share by Email
  • Print resource

Matthew Tyson作者 ：Matthew Tyson

软件架构师,InfoWorld

思想库

在使用Wix这样的所见即所得编辑器和使用Webpack这样的东西从头开始构建自己的堆栈之间，是使用Gatsby这样的框架。

Gatsby作为静态网站生成器更为人所知，尽管它也与Next.js和SvelteKit等全面的全栈式服务器端渲染框架竞争。Gatsby努力使开发经验变得友好和简单，同时提供基本的网站功能，如开箱即用的现代模糊图像。

[InfoWorld上还有：2021年最佳开源软件] 。

但与Next.js或SvelteKit不同，Gatsby纯粹是一个前端框架，而不是一个全栈框架。因此，开发时需要Node.js，但部署时不需要。为此，Gatsby支持几个点击部署的平台，包括Netlify和Gatsby Cloud。

让我们直接进入--这是了解Gatsby如何工作以及它提供什么的最好方式。你需要访问Node.js/NPM安装的命令行，以及Git，这是用来下载入门套件的。一旦你能从命令行访问NPM，通过输入npm install -g gatsby-cli ，使用它来全局安装Gatsby。

当完成后，你应该能够输入gatsby -v ，并得到一个响应，其中包含已安装的版本。用gatsby new 开始构建一个新的应用程序。Gatsby在很大程度上会在互动过程中牵着你的手，你所做的任何选择都可以在以后更改。我把我的项目命名为 "我的演示"，并接受默认的位置my-demo。

当提示你使用哪种CMS时，你可以接受 "不（或者我以后再添加）"作为回应。对于CSS处理器也是如此。你可以在添加哪些额外插件的选项中留空。

运行Gatsby启动器应用程序

现在你可以在开发模式下运行该应用程序，方法是：cd-ing到新目录（my-demo），然后输入gatsby develop 。

一旦运行，你可以访问localhost:8000，看到图1中的欢迎屏幕。

图1.盖茨比的欢迎屏幕

IDG

热模块更换

Gatsby在出厂时已经激活了HMR（热模块替换），所以继续修改/src/pages/index.js中的<title> 元素为<title>My Home Page></title> ，你会立即看到这一变化反映在浏览器中。(确保应用程序在开发模式下运行；或者在后台进程中，或者打开一个新的命令行窗口。)

添加一个页面

Gatsby是建立在React之上的，所以你可以使用React的全部功能。在Gatsby开发的一个关键事实是，每个页面都是一个React组件。甚至索引页也是一个React组件。你可以通过打开该文件并观察到它定义了一个函数（const IndexPage = () => { return (...) ），然后将其导出为JS模块（export default IndexPage ）来验证这一点。简而言之，index.html文件导出了一个代表索引页的React功能组件。

让我们添加一个新的页面，并让它变得非常简单。创建一个新的文件/src/pages/mypage.js，并赋予它清单1的内容。

清单1.添加一个简单的页面

import * as React from "react";

添加导航

你可以在localhost:8000/mypage访问这个新页面。现在从你的新页面添加一个链接到索引页。通过导入Gatsby的内置链接组件，添加它。

import { Link } from 'gatsby'

现在用<Link to="/">Home</Link> 把它添加到你的页面。链接会出现，你可以点击它来导航到索引页。

创建一个共享组件

现在添加一个新文件 src/components/Dog.js。(注意你也是在添加组件目录。)把清单2的内容放到这个文件中。

清单2.狗的组件

cat src/components/Dog.js

这是一个典型的可重用的React组件，它接受一个道具(name)，然后通过token语法在标记中使用。你可以在页面组件中使用它，如清单3中所示。

清单3.使用狗组件

import Dog from '../components/Dog.js';

这里没有任何Gatsby特有的东西，除了你的共享组件不在页面目录中。(注意，组件目录的名称没有什么特别之处）。

使用图像

Gatsby的名声之一是它复杂的图像支持。这一点现在是通过官方插件来实现的。让我们把图片添加到Dog组件中。如清单4所示，首先安装NPM包。

清单4.安装图像插件和依赖性

npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp

清单4安装了四个不同的插件，它们被Gatsby用来处理图片并从文件系统加载。现在，通过编辑项目根目录下的gatsby-config.js文件，向Gatsby注册这些插件。该文件在模块导出中有一个空的插件条目。添加清单5中看到的插件条目。

清单5.在gatsby-config.js中注册图像插件

plugins: [ `gatsby-plugin-image`, `gatsby-plugin-sharp` ]

这两个图像插件包括一个用于动态图像（数据驱动的图像，即可以根据应用程序的状态而改变）和一个用于静态图像，即始终保持不变。在这种情况下，我们只是要使用一个静态图像。

打开/src/components/dog.js文件，添加导入和组件，如清单6所示。

清单6.使用StaticImage组件

import * as React from "react";

清单6从gatsby-plugin-image包中导入StaticImage组件，并使用它来显示给定URL的图片。注意，如果你想从本地文件系统加载文件，你需要同时导入gatsby-source-filesystem，并将其配置为指向图像文件所在的位置（见这里）。如果你想使用动态图像，你可以使用GatsbyImage组件，并且你必须包括gatsby-transformer-sharp插件。

Gatsby和GraphQL

Gatsby的另一个显著特点是它大量使用GraphQL，这是一种由Facebook发起的查询语言。GraphQL可以从许多来源提取数据供你的组件使用。这种能力被用于Gatsby的许多插件中，以统一数据的加载方式。

我将通过从gatsby-config.js文件内定义的信息中拉出数据，让你感觉到这是如何工作的。一个类似的过程用于从文件系统访问文件，以及从内容管理系统和数据库访问数据。

首先，看看gatsby-config.js。注意它导出了几个元数据字段，如清单7中所示。

清单7. gatsby-config.js的输出

module.exports = {

现在打开 src/pages/mypage.js 文件，访问该元数据，如清单 8 所示。

清单8.用GraphQL访问元数据

import * as React from "react";

清单8中的变化首先是从useStaticQuery 和graphql 包中导入gatsby 。在标记的主体中，你可以看到一个令牌通过{data.site.siteMetadata.title} 来访问网站元数据。但是这些数据是从哪里来的呢？

在return 语句之前，数据变量是通过调用useStaticQuery 来填充的，这定义了一个访问网站元数据的GraphQL查询。这些查询可以访问像查询参数一样的页面变量，因此在访问数据存储时可以完全动态（即使用实体Ids）。

GraphQL可能是采用Gatsby的最大障碍，因为它的界面看起来很复杂。但从长远来看，GraphQL为统一的数据查询提供了一个强大的方法。

[紧跟JavaScript和软件开发的最新发展。订阅InfoWorld First Look通讯]

伟大的盖茨比

你已经领略了Gatsby的一些能力。Gatsby有一个庞大的插件生态系统，包括官方和社区创建的插件。无论何时你需要什么，这都是一个很好的开始。

Gatsby继续发展以跟上行业变化的步伐。这是一个诱人的选择，尤其是在寻找建立像博客这样的静态网站时。

阅读更多关于JavaScript开发

相关的。

马修-泰森是黑马集团的创始人。他相信以人为本的技术。在不弹吉他的时候，Matt会去野外和哲学的腹地探险。自2007年以来，他一直为JavaWorld撰写文章。

关注

Copyright © 2022 IDG Communications, Inc.

如何选择一个低代码开发平台

avatar
文章
阅读
粉丝