{"componentChunkName":"component---src-templates-blog-post-js","path":"/2021-11-20-gatsby-js-config/","result":{"data":{"site":{"siteMetadata":{"title":"Howard's Note","disqusShortname":""}},"markdownRemark":{"id":"d02f29a1-265d-5f85-bf07-3553a7e186f5","html":"

gatsby config api

\n

gatsby 包含了一個gatsby-config.js，可以提供以下設定：

\n\n

此config檔僅支援commonJs。

\n

siteMetaData

\n

可以定義一些各頁面間共享的參數。gatsby會產生一個 graphQL的 field 叫做 siteMetaData，供各頁面查詢。

\n
module.exports = {\n  siteMetadata: {\n    title: `Gatsby`,\n    siteUrl: `https://www.gatsbyjs.com`,\n    description: `Blazing fast modern site generator for React`,\n  },\n}
\n

plugin

\n

gatsby 不支援直接使用 npm安裝插件。如果要使用gatsby的插件，必須在gatsby-config.js底下定義要使用的插件。

\n

plugin 是一個 Array。可以直接使用string指定要使用的插件名稱：

\n
module.exports = {\n  plugins: [`gatsby-plugin-name`],\n}
\n

若該插件支援option，也可以傳入包含options的object：

\n
module.exports = {\n  plugins: [\n    {\n      resolve: `gatsby-plugin-name`,\n      options: {\n        optionA: true,\n        optionB: `Another option`,\n      },\n    },\n  ],\n}
\n

plugin 欄位也可以是混合的 array。可以混合不需要指定option的 plugin (型別為string)以及需要指定option的plugin（型別為object）：

\n
module.exports = {\n  plugins: [\n    `gatsby-transform-plugin`,\n    {\n      resolve: `gatsby-plugin-name`,\n      options: {\n        optionA: true,\n        optionB: `Another option`,\n      },\n    },\n  ],\n}
\n

flag

\n

設定flag可以指定開啟一些正在實驗中的功能。

\n

pathPrefix

\n

pathPrefix可以加入產生的網頁路由前綴。

\n

Polyfill

\n

gatsbyjs 使用 es6的 promise api。預設為未支援promise的瀏覽器提供了polyfill。如果要提供自已版本的 Promise polyfill，可以將此flag 設為 false。

\n
module.exports = {\n  polyfill: false,\n}
\n

mapping node type

\n
\n

官方建議使用 @Link grapthQL directives\nhttps://www.gatsbyjs.com/docs/reference/graphql-data-layer/schema-customization/#foreign-key-fields

\n
\n

mapping 屬性支援將不同來源的資料做 mapping。

\n

在資料 mapping 前。要先確定是否有裝該資料來源的 transformer (i.e. transformer of yaml, json… )，並且設定gatsby-source-filesystem讓gatsby可以正確取得mapping 檔案。

\n

以下範例，假設一個多作者協同的blog，有一個 author.yaml：

\n
- name: Kyle Mathews\n  bio: Founder @ GatsbyJS. Likes tech, reading/writing, founding things. Blogs at bricolage.io.\n  twitter: \"@kylemathews\"
\n

markdown 的 frontmatter：

\n
---\ntitle: A blog post\nauthor: Kyle Mathews\n---
\n

設定 author 的 mapping 關係：

\n
module.exports = {\n  plugins: [...],\n  mapping: {\n    \"MarkdownRemark.frontmatter.author\": `AuthorYaml.name`,\n  },\n}
\n

gatsby 產生的gruaphql query便提供了兩個資料來源的 mapping 供查詢：

\n
query ($slug: String!) {\n  markdownRemark(fields: { slug: { eq: $slug } }) {\n    html\n    fields {\n      slug\n    }\n    frontmatter {\n      title\n      author {\n        # This now links to the author object\n        name\n        bio\n        twitter\n      }\n    }\n  }\n}
\n

mapping 也可以用來mapping 一個包含外來鍵（ids）的array到其它的 collection of data。

\n

例如：

\n
// experement.js\n[\n  {\n    \"id\": \"companyA\",\n    \"company\": \"Company A\",\n    \"position\": \"Unicorn Developer\",\n    \"from\": \"Dec 2016\",\n    \"to\": \"Present\",\n    \"items\": [\n      {\n        \"label\": \"Responsibility\",\n        \"description\": \"Being an unicorn\"\n      },\n      {\n        \"label\": \"Hands on\",\n        \"tech\": [\"REACT\", \"NODE\"]\n      }\n    ]\n  }\n]
\n
// tech.js\n[\n  {\n    \"name\": \"REACT\",\n    \"icon\": \"facebook\",\n    \"color\": \"teal\",\n    \"label\": \"React\"\n  },\n  {\n    \"name\": \"NODE\",\n    \"icon\": \"server\",\n    \"color\": \"green\",\n    \"label\": \"NodeJS\"\n  }\n]
\n

在gatsby-config.js 設定規則：

\n
module.exports = {\n  plugins: [...],\n  mapping: {\n    'ExperienceJson.items.tech': `TechJson.name`\n  },\n}
\n

可以查詢 tech 與它關聯的項目：

\n
query {\n  allExperienceJson {\n    edges {\n      node {\n        company\n        position\n        from\n        to\n        items {\n          label\n          description\n          link\n          tech {\n            label\n            color\n            icon\n          }\n        }\n      }\n    }\n  }\n}
\n

Proxy

\n

告訴開發server將request導到指定的server。

\n

developMiddleware

\n

加速開發的設定。

\n\n

將此屬性設定為 automatic，可以在開發時直接使用 jsx，而不需手動import react。

\n\n

可以指定gatsby使用特定的jsx transformer。例如若使用 @emotion/react，可以如下設定：

\n
module.exports = {\n  jsxImportSource: \"@emotion/react\",\n}
\n

如此預設的 jsx runtime 就會變成 @emotion/react了。

","frontmatter":{"title":"gatsby config api","date":"November 20, 2021","description":null,"tags":["gatsby"],"template":"post"}}},"pageContext":{"slug":"/2021-11-20-gatsby-js-config/","previous":{"node":{"fields":{"slug":"/2021-11-13-gatsby-js-note/"},"frontmatter":{"date":"13 November, 2021","title":"Hello, gatsby","tags":["gatsby"]}}},"next":{"node":{"fields":{"slug":"/2021-12-03-python-note/"},"frontmatter":{"date":"03 December, 2021","title":"Python Note","tags":["python"]}}}}},"staticQueryHashes":["2841359383","3810545343","916993862"]}