Gatsby + TS 搭建新项目 | 处理报错：The @emotion/core package has been renamed to @emotion/

Gatsby官网：www.gatsbyjs.com/docs/

中文教程：www.gatsbyjs.cn/tutorial/

Gatsby 是一个基于 React 的免费、开源框架，用于帮助 开发者构建运行速度极快的 网站 和 应用程序。

TypeScript官网：www.typescriptlang.org/docs/

创建项目

确认node版本

node -v

Tip： node版本需在18及以上才能使用gatsby

安装脚手架

npm install -g gatsby-cli

查看可用命令

gatsby --help

新建一个 Gatsby 网站

gatsby new 项目名 https://github.com/gatsbyjs/gatsby-starter-hello-world

cd 项目名
gatsby develop   #启动项目

安装和配置必要依赖

typescript依赖，gatsby及其类型定义：

npm install gatsby react react-dom typescript @emotion/styled @types/react @types/react-dom

在根目录下创建 tsconfig.json：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react-jsx",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node"
  },
  "include": ["src"]
}

如果你使用路径别名，请确保在 tsconfig.json 中配置了 paths，并且这些路径与项目结构匹配。

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"],
      "@pages/*": ["pages/*"]
    }
  }
}

！！！如果没有配置好ts,可能会报错：找不到模块“gatsby”。你的意思是要将 "moduleResolution" 选项设置为 "nodenext"，还是要将别名添加到 "paths" 选项中?ts(2792)

gatsby依赖:

插件库：www.gatsbyjs.cn/packages/ga…

gatsby-plugin-typography

npm install --save gatsby-plugin-typography

编辑项目根目录下的文件 gatsby-config.js:

（gatsby-config.js 文件是 Gatsby 会自动识别的另一个特殊文件。 要在这里添加插件和网站配置。）

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

typography

react-typography

gatsby-plugin-emotion

@emotion/react

npm install --save gatsby-plugin-typography typography react-typography gatsby-plugin-emotion @emotion/react

编辑项目根目录下的文件 gatsby-config.js:

module.exports = {
  plugins: [
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

在需要的组件中：

import * as React from "react";
import { css } from "@emotion/react";
import { Link, graphql } from "gatsby";
import { rhythm } from "../utils/typography";

！！！注意是@emotion/react而不是@emotion/core。不然可能会报错：The ‘@emotion/core’ package has been renamed to ‘@emotion/react’. Please import it like this import { jsx } from '@emotion/react'.

gatsby-source-filesystem（数据源插件）

npm install --save gatsby-source-filesystem

编辑项目根目录下的文件 gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

gatsby-transformer-remark（数据转换插件）

npm install --save gatsby-transformer-remark

编辑项目根目录下的文件 gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    `gatsby-transformer-remark`,
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

根目录下创建declarations.d.ts文件，声明：

declare module "*.jpg" {
  const value: string;
  export default value;
}

declare module "*.png" {
  const value: string;
  export default value;
}

declare module "*.jpeg" {
  const value: string;
  export default value;
}

declare module "*.svg" {
  const value: string;
  export default value;
}

declare module "*.gif" {
  const value: string;
  export default value;
}

GraphiQL

GraphiQL 是 GraphQL 的集成开发环境（IDE）。它功能强大，且各方面都很棒，在你构建 Gatsby 网站时会经常使用。 你可以在站点的开发服务器正在运行的时候访问它——地址通常是：  http://localhost:8000/___graphql。

查询数据eg:

import * as React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

export default ({ data }) => {
  console.log(data)
  return (
    <Layout>
      <div>Hello world</div>
    </Layout>
  )
}

export const query = graphql`
  query {
    allFile {
      edges {
        node {
          relativePath
          prettySize
          extension
          birthTime(fromNow: true)
        }
      }
    }
  }
`

控制台输出：

更多GatsbyQL 查询选项：www.gatsbyjs.cn/docs/graphq…

TIP：报错修正后的必要步骤：

清除缓存重启，尝试清除 Gatsby 缓存并重启开发服务器：

gatsby clean
gatsby develop