Gatsby/Typescriptでimportパスのaliasを設定する

Gatsbyは、デフォルトだとimportパスのalias設定が相対パスになっているため、開発していて大変かと思います。 CreateReactApp(CRA)は、tsconfig.jsonのbaseUrlとpathsのみでimportパスのalias設定が可能だったと思いますが、GatsbyはWebpackによってコンパイルされていますので、tsconfig.jsonの設定のみでは残念ながら解決できません。 今回は、Gatsbyでimportパスのaliasを設定する方法をご紹介していきます！

gatsby-node.jsにimportパスのalias設定を記述する

gatsby-node.jsにonCreateWebpackConfigというイベントハンドラが設定可能です。 例えば、srcディレクトリを@に設定する場合は下記のように設定します。

const path = require('path')

exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  })
}

tsconfig.jsonでエディタの補完も設定する

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

これで、以下のように@で絶対パスにてimportできるようになっていればOKです！

import Header from '@/components/Header'