「create-react-app」+ 「TypeScript」環境で絶対パスのaliasを指定する

2020-10-23

import文を相対パスで記載せず、絶対パスで記載するやり方。

手順

①パッケージをインストールする

webpackの設定を変更するためのパッケージ、react-app-rewiredをインストールする。
https://github.com/timarney/react-app-rewired

zsh

❯  yarn add react-app-rewired -D

②package.jsonを編集する

先程インストールしたパッケージに合わせて、package.json内のデフォルトのscript部分を書き換える。

package.json

"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-app-rewired eject",

③webpackの設定ファイルを作成する

ルート階層にconfig-overrides.jsを作成し、alias設定の記述を書き込む。

config-overrides.js

const path = require('path')

module.exports = (config) => {
  config.resolve = {
    ...config.resolve,
    alias: {
      ...config.alias,

      // 以下に指定したいalias名と、対応パスを記述
      '@js': path.resolve(__dirname, './src/js'),
      '@data': path.resolve(__dirname, './src/data'),
      '@styles': path.resolve(__dirname, './src/styles'),
    }
  };

  return config;
}

④tsconfig.jsonを編集する

create-react-app環境だとtsconfig.jsonでpathsを指定できないため、（react-scripts startした時にpathsオプションが自動で消されてしまう） compilerOptionsの記述の前に、extendsの記述を追加し、別ファイルで設定を行う。

tsconfig.json

{
  "extends": "./tsconfig.paths.json",
    "compilerOptions": {
  // 省略
}

⑤tsconfig.paths.jsonを作成する

config-overrides.jsの設定に対応するpathsを記述する。

tsconfig.paths.json

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

これでsrc配下のファイルでimport文を書くとき、絶対パスaliasを使用することができる。

// こんな長いパス指定も
import hoge from "../../../js/component/hoge";

// aliasでスッキリ
import hoge from "@js/component/hoge";

参考

JavaScript React TypeScript Webpack