NPM包gatsby-cli使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

gatsby-cli是一款工具，它可以帮助前端开发者轻松创建基于React的静态站点，并且可以使用GraphQL查询数据。此工具基于Gatsby框架，致力于提高开发效率和站点性能。

本文将介绍如何使用npm包 gatsby-cli来安装和使用Gatsby。

安装

在安装之前，需先安装Node.js和npm。安装好后在命令行界面输入以下命令：

npm install -g gatsby-cli

创建站点

现在，我们来创建一个新的 Gatsby 站点。在终端中输入以下命令：

gatsby new my-gatsby-site

这会下载并安装好所有默认的 Gatsby 开发所需的文件。

然后，进入新建的站点文件夹 my-gatsby-site，运行以下命令：

cd my-gatsby-site
gatsby develop

然后在浏览器中，访问 http://localhost:8000，就可以看到站点。

如果想要停止开发服务器，在命令行中输入 ctrl + c。

插件

接下来，我们来了解一下如何使用Gatsby的插件机制。Gatsby有非常多的插件可以使用。这里推荐两个比较好用的插件：

gatsby-plugin-typography

这个插件用来快速安装和使用Typograhy.js。先运行以下命令来安装插件：

npm install gatsby-plugin-typography typography react-typography

然后在 gatsby-config.js 中加入以下内容：

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

最后，在 src/utils/typography.js 文件中添加以下代码：

import Typography from 'typography'
import fairyGateTheme from 'typography-theme-fairy-gates'

const typography = new Typography(fairyGateTheme)

export default typography

gatsby-image

此插件可以用来优化站点中的图片性能。首先，在终端中运行以下命令来安装插件：

npm install --save gatsby-image gatsby-transformer-sharp gatsby-plugin-sharp

在 gatsby-config.js 文件中加入以下内容：

-- -------------------- ---- -------
-------------- - -
  -----
  -------- -
    -- ---
    ---------------------------
    ----------------------
    -- ---
  --
-

最后，在你需要图片的文件中，可以这么写：

-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- --------
------ --- ---- --------------

------ ------- -- ---- -- -- -
  -----
    --------- -----------------
    ----
      ---------------------------------------
      ----------- ---- --- --------
    --
  ------
-

------ ----- ----- - --------
  ----- -
    ------------------ - --- ---------------------- -- -
      --------------- -
        - ------- --- ----- ---------- -------------- ----- -- --- ------
        - ----- -- ------- -- ------ -- ---- ------ ------ --------
        --------------- ---- -
          ------------------------
        -
      -
    -
  -
-

结论

本文介绍了 gatsby-cli 的一些基础使用方法和插件，希望能对你的使用有所帮助。Gatsby相对于其他静态网页生成器，对于React开发人员来说更为友好，如果你在高效性上有需求（尤其是Google PageSpeed等工具），建议你在开发新项目前考虑一下Gatsby。

参考链接

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/5eedb4b7b5cbfe1ea0611340