読み込み中 %

アイコン

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

taikishiino

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

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

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

gatsby-node.js
const path = require('path')

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

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

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

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

.tsx
import Header from '@/components/Header'