Gatsby的插件机制

gatsby几个重要文件

gatsby有几个非常重要的文件

• gatsby-config.js
• gatsby-browser.js
• gatsby-node.js
• gatsby-ssr.js

我们在gatsby-config.js中配置站点信息及相关插件，可以在gatsby-browser.js实现页面生命周期钩子，在gatsby-node.js中自定义生成页面的逻辑，在gatsby-ssr.js对页面渲染过程进行包装。

gatsby插件目录

我们可以通过插件实现Node、server-side rendering及browser相关接口，达到功能扩展的目的，插件目录结构如下。需要注意的是，必须包含package.json文件，否则不能正确加载。

gatsby-plugin-*
|-- gatsby-browser.js
|-- gatsby-node.js
|-- gatsby-ssr.js
`-- package.json

插件命名规则

gatsby官方有一套插件的命名规则

• gatsby-source-* 用于加载特定资源，如WordPress、MongoDB等；
• gatsby-transformer-* 用于数据转换，如将CSV转换成JS对象；
• gatsby-[plugin-name]-* 插件的插件，gatsby-父插件名-当前插件名，如gatsby-remark-add-emoji;
• gatsby-theme-* 用于Gatsby themes，是gatsby主题插件;
• gatsby-plugin-* 通用命名，如果不匹配其他命名规则，就用这个。

插件加载

gatsby的插件加载机制跟webpack有点相似，不过gatsby除了从node_modules目录查找插件外，还会从plugins目录中查找插件。

// gatsby-config.js
module.exports = {
  plugins: [
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `docs`,
        path: `${__dirname}/../docs/`,
      },
    },
  ],
}

gatsby加载完配置的插件后，还会从当前目录加载gatsby-node.js、gatsby-browser.js及gatsby-ssr.js。