用Gatsby开始前端开发

1 年 ago
宇, 华
2 minutes

Gatsby 是什么？

这是一个使用React开发的静态网站生成器，它是一个用于生成静态HTML/CSS和JavaScript的工具，俗称SSG。

发布 v3.0.0 版本

从2021年3月开始，最新版本是3系列的发布，与2系列相比有一些细节上的变化，但整体架构似乎并未改变，所以如果要从现在开始学习的话，3系列也是不错的选择。

重要的更新内容

    • 必要なページだけのビルドに変わったので、開発時のビルド待ち時間を削減

 

    Node.js 12未満のサポート終了、React 17/webpack 5/ESLint 7へアップデート、globalのgraphqlではなくimportして使うように変更、APIの変更など

盖茨比的特点

Gatsby不仅可以生成静态HTML，还可以生成与之关联的常规React应用。
听到静态网站生成器时，我原以为无法创建动态网站，但Gatsby能够发挥React单页面应用的所有功能。

参考文章：https://qiita.com/uehaj/items/1b7f0a86596353587466

以下为参考文章链接。

能做的事情

・在React应用中，可以像使用axios一样完成相同的功能。
・由于GraphQL默认已安装，可以通过GraphQL传递外部API、WordPress、CSV等数据进行获取。
・与TypeScript标准兼容。
・以爆炸般的速度创建网站作为WordPress的替代方案。
・采用Jamstack结构（通过webhook进行预先构建）。

优势

• 不需要考虑服务器的便捷性（基于SSG）
• 总之非常快（对SEO友好，渲染和页面转换速度爆炸快）
• 由于插件丰富，因此很容易进行安装
• 适合初学者入门
• 具备自定义性

脆弱之处

    • ページ数が多い大規模なサイトではビルドに時間がかかる

 

    頻繁にAPIリクエストするようなアプリケーションは向かなそう

JavaScript的编写方式

组件的制作方法

JSX有两种写法，一种是类组件写法，另一种是函数组件写法。据React开发方面推荐的是使用函数式写法。

在之前的版本中，状态管理和生命周期的功能只能通过类来实现，但现在新增了函数式编程的hook功能。

函数式 shù

import React from 'react'

const Sample = () => {
  return (
    <div>
      <h1>Sample</h1>
      <h2>This is a component.</h2>
    </div>
  );
}

export default Sample

类类型

import React from 'react

class Sample extends React.Component {
  render() {
    return (
      <div>
        <h1>Sample</h1>
        <h2>This is a component.</h2>
      </div>
    );
  }
}

export default Sample

CSS的编写方式

CSS的设计方法

CSS有大约4个选项。个人而言，我觉得CSS 模块化看起来不错。

    • CSS Modules

 

    • CSS in JS

 

    • Tailwind CSS

 

    Purge CSS

CSS模块

将文件分为js和css，将CSS导入并应用。
由于作用域限定，无需像BEM一样使类名变得很长。

例：
组件/头部.js
组件/头部.module.scss


.layout {
  background: #000;
  margin-bottom: 1.45rem;
}
.title {
  color: white;
  text-decoration: none;
}

// このようなクラス名をつけずに .title というクラス名にしても他とバッティングすることがない
.headerTitle {

}


import * as headerStyles from "./header.module.scss"

const Header = ({ siteTitle }) => (
  <header className={headerStyles.layout}>
    <div>
      <h1 className={headerStyles.title}>
        <Link to="/">{siteTitle}</Link>
      </h1>
    </div>
  </header>
)

用JavaScript编写的CSS

总的来说，这种方法是直接在JavaScript中编写CSS。对于React来说，styled-components是主流的选择，但个人对它并不是太喜欢呢，哈哈。

https://styled-components.com/ – 组件样式化

https://emotion.sh/docs/introduction – Emotion文档简介

尾风CSS

Tailwind CSSはユーティリティークラスを大量に集めたCSSフレームワークです。
マルチクラスでスタイルを複数付与して、CSSを極力書かないような設計(Bootstrapのような）

清除CSS

PurgeCSSは、未使用のスタイルをCSSファイルから削除するためのツールで、
使用すると、CSSファイルを60%以上削減できるらしいです。

请问能用中文给以下内容进行改写吗？只需要一种解释即可：

参考引用：https://coliss.com/articles/build-websites/operation/css/how-to-remove-unused-css.html

GraphQL的使用方式

Gatsby默认内置了GraphQL环境。

使用yarn develop命令即可启动GraphQL，并轻松使用GraphQL的IDE。
访问http://localhost:8000/___graphql。

您可以访问上述网址，在那里编写查询，通过GraphQL获得该网站内的数据以及与之相关的API数据。

{
  site {
    siteMetadata {
      title
    }
    port
    host
    buildTime
  }
  allFile {
    edges {
      node {
        id
        relativePath
      }
    }
  }
}

演示环境

在查看实际代码时进行解释。

■ GitHub
https://github.com/RyunosukeOguri/hello-gatsby

■ GitHub
请访问此链接获取我的 Gatsby 代码：
https://github.com/RyunosukeOguri/hello-gatsby

■ 示威活动
https://hello-gatsby.amalab.io

总结

    • 大量のページ数のサイトやAPIリクエストが頻繁に起きるアプリケーションは向いていないかも

 

    • LPやコーポレート、ブログとかはかなりおすすめしたい。

 

    • Gatsbyが難しいというよりReactに慣れていないとVueユーザーは概念的な違いから学習コストが高く感じる印象。

 

    • 標準でTypeScriptとGraphQLが搭載されているのは結構気に入っている。（この２つを学ぶって意味ではわかりやすいかも）

 

    • SSGならGatsby, SPA,SSRならNext,Nuxt。どれが良いというより作るものによってやはり検討が必要。

 

    総評、Gatsbyのスペックは高いので積極的に使って良いと思っている。

這是我想要討論的另一個議題。

在Next.js中有一个名为ISR（增量静态再生）的机制，非常适合动态应用程序。
ISR不是在构建时生成页面，而是在访问时生成页面。
通过SSG静态生成页面，并在构建后如果数据库中有数据添加，在访问页面时生成页面并显示生成的页面。（尽管这还是一个实验性的功能）

谢谢！

✖
广告
将在 10 秒后关闭
bannerAds