Gatsby 2.0.0-alpha.48までの変更点をまとめてみた

2018.06.02

このブログはGatsbyで作られています。 Gatsbyの最新版は1.9.269ですが、Githubでv2の開発が進められています。もう既にalpha版としてリリースされているので、実際に使ってみつつ、変更点をまとめてみました。

変更内容

Breaking Changes

v2ブランチにあるBreaking Changes.mdを確認すると現段階(2018/06/02)での破壊的変更を確認できます。

Breaking Changes.mdと実際に触ってみて気になった変更点を記録しておきます。

Remove postcss plugins (cssnext, cssimport) from default css loader config

postcssが依存ライブラリから削除されています。

boundActionCreators => actions

gatsby-node.jsでexportする関数の引数のリネームです。

pathContext => pageContext

propsで渡されてくる引数名の変更です。

Source & transformer plugins now use UUIDs for ids. If you used glob or regex to query nodes by id then you’ll need to query something else.

DataSource系のプラグインのUUIDの方式が変更になりました。

Changed modifyBabelrc to onCreateBabelConfig

gatsby-nodeでexportする関数のリネーム

Changed modifyWebpackConfig to onCreateWebpackConfig

gatsby-nodeでexportする関数のリネーム

Inlining CSS changed — remove it from any custom html.js as done automatically by core now.

html.jsで<style id="gatsby-inlined-css" dangerouslySetInnerHTML={{ __html: require('!raw-loader!../public/styles.css') }} />みたいな記述を書いてCSSをHTMLに埋め込んでいたのですが、これがcoreの方に移動しました。

Manually install react and react-dom, along with any dependencies required by your plugins.

reactとreact-domが依存ライブラリから外れて、自分のリポジトリでdependenciesに入れるようになりました。現時点の最新版でreact@16.4が使うことができました。new Context APIを使うこともできます。 gatsby 1系ではreactの15系が動いていたので最新版を使えるのは嬉しいです。

Layouts have been removed. To achieve the same behavior as v1, you have to wrap your pages and page templates with your own Layout component. Since Layout is a non-page component, making query has to be done with StaticQuery.

これは大きな変更でHeaderやFooterをlayouts/index.jsで書いていたと思うのですが、書くページでレイアウトのコンポーネントを呼び出すようになりました。

実際にはlayout.jsみたいなコンポーネントを書いてpages/以下のコンポーネントで呼び出すことになると思います。

layout.js

import React  from 'react'

const Layout = (props) => {
  return <div>
    {props.children}
  </div>
}

pages/hoge.js

import React  from 'react'
import Layout from '../src/layout.js'

const Page = () => {
  return <Layout>
    <SomeComponent>
  </Layout>
}

気になった内容

gatsby buildからbuild-cssが消えた #4588

gatsby buildで5つのステージがあったのですが、build-cssが削除されて4つのステージになりました。 webpackがv4になる際にbuild-javascriptに統合されたようです。

gatsby-linkからimportしていたLinkがcoreに統合 #3864

gatsby-linkのパッケージからインポートしていたLinkがcoreの方に入りました。

before

import Link from 'gatsby-link'

after

import { Link } from 'gatsby'

webpackの設定の書き換え方が変更された

今までは引数のconfigを使って書き換えていましたがsetWebpackConfigというメソッドで変更するようになっています。 gatsby/src/utils/api-node-docs.js#L156-L162

内部で使われているwebpackがv1 => v4になっているのでv4にそった書き方をする必要があります。

api-node-docs.jsより

exports.onCreateWebpackConfig = ({
  stage, getConfig, rules, loaders, actions
 }) => {
   actions.setWebpackConfig({
     module: {
       rules: [
         {
           test: 'my-css',
           use: [loaders.style(), loaders.css()]
         },
       ],
     },
   });
 }

v2に上げた作業記録

とりあえずv2にしてパッケージを揃える

package.jsonでnextとバージョン指定することで実際に使用することができます。

"dependencies": {
  "gatsby": "next"
   // gatsby系のプラグインに'next'をつけておく
}

あとはreactとreact-domが必要なのでyarn add react react-domを実行しておきます。

一旦このあたりでgatsby devを実行するとgatsby-plugin系のライブラリでpeer dependency化したプラグインがいくつか現れ Module not found: Error: Can't resolve 'PACKAGE_NAME' みたいなエラーが出ます。 yarn add PACKAGE_NAME を実行してインストールします。

gatsby-node.jsの修正

次のメソッドを使っているならリネームをします。

Changed modifyBabelrc to onCreateBabelConfig Changed modifyWebpackConfig to onCreateWebpackConfig

webpackの設定を書き換える記法をactions.setWebpackConfig形式に変更します。

layout/index.jsの代わりのコンポーネントを書く

Breaking Changeで書いた内容のように変更していきます。

あとは試行錯誤

基本的にgatsby devが通らなければなにか治ってないので、エラー文を見て直していけば動くようになります。

おわりに

全体的にgatsbyや関連pluginに依存してたライブラリがpeerDependencyになり、ユーザーの使いたいバージョンが使えるようになっているのが好印象です。内部のbabalもv7が使われており、babelでTSを使うこともできるのでよりきれいに使いたい方は選択肢が増えていくのではないでしょうか？誰得の記事なのかわかりませんが、日本のGatsbyJSユーザーの皆さんのお役に立てたら嬉しいです。

Xでシェア