zukucode
主にWEB関連の情報を技術メモとして発信しています。
React

create-react-appで作成したプロジェクトにimportのaliasを設定する

create-react-appで作成したプロジェクトに import の alias（エイリアス）を設定する方法を紹介します。

webpack の設定

create-react-appで作成したプロジェクトはwebpackの設定をする項目がないので、cracoというパッケージをインストールして、webpackの設定をできるようにします。

（cracoとは「Create React App Configuration Override」という意味のようです）

$ npm install -D @craco/craco

プロジェクトルート（package.jsonと同じ場所）にcraco.config.jsというファイル名でファイルを作成します。

ここではsrcフォルダまでのパスを@として定義しています。

（require('path')の箇所で「Require statement not part of import statement」のエラーが出るかもしれませんが、無視して問題ありません）

craco.config.js
const path = require('path');

module.exports = {
  webpack: {
    alias: {
      '@': path.resolve(__dirname, 'src/'),
    },
  },
};

また、上記の設定ファイルが読み込まれるようにpackage.jsonの以下のコマンドをreact-scriptsからcracoに変更します。

package.json
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "craco eject"
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

TypeScript の設定

TypeScript を使用している場合はtsconfig.jsonに設定を追加します。

tsconfig.jsonと同じ場所にtsconfig.paths.jsonというファイル名でファイルを作成します。

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

tsconfig.jsonでこのファイルを読み込むようにします。

tsconfig.json
{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {

tsconfig.jsonにpathsの設定を記載しない理由は、ビルド時tsconfig.jsonにpathsの設定が消されてしまうためです。

そのため、面倒ですが、pathsは別ファイルで設定して、tsconfig.jsonではそのファイルを参照する形にしています。

ESLint の設定

上記の設定だけではまだvsocdeでエラーが出ている状態なので、ESLintの設定を行います。

ESLintの設定についてはcreate-react-appで作成したプロジェクトにESLintやPrettierなどの設定を行うで紹介しているので、参考にしてください。

eslint-import-resolver-aliasのプラグインをインストールします。

$ npm install -D eslint-import-resolver-alias

eslintrc.jsに以下の設定を追加します。

eslintrc.js
module.exports = {
  settings: {
    'import/resolver': {
      alias: {
        map: [['@', './src']],
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
};

以上で、設定は完了です。

React

関連記事