React（TypeScript） WebPackでインポートのエイリアス化（省略、@、アットマーク）

目次

インポートのエイリアス化とは

階層が深くなっていくと、importする際に「../../../../Hoge」のような「../」などの相対パスが複数記載されることがあります。
共通コンポーネントなどは特に複数箇所からの利用が行われるため、上記のようなパスをエイリアスを設定することで、「@Hoge」のようにまとめる事ができます。

WebPackのエイリアス定義

以下のようなディレクトリ構造の前提で記載します。

src
  ┣ index.ts
  ┗components
         ┣ file.ts
         ┗ dir
            ┗ fileee.ts

「webpack.config.js」を以下のようにエイリアスの定義を行います。

module.exports = () => {
  return {
    resolve: {
      alias: {
        "@dir": path.join(__dirname, "src/components/dir/"),
        "@file": path.join(__dirname, "src/components/file.ts"),
      },
      extensions: [".json", ".js", ".jsx", ".ts", ".tsx"],
    },
    ~~~~~WebPackの定義~~~~~
  };
};

TypeScript用のエイリアス定義

「tsconfig.json」を以下のようにエイリアスの定義を行います。

{
  "compilerOptions": {
    ~~~~~tsconfig.jsonの他の定義~~~~~
    "baseUrl": "./src",
    "paths": {
      "@dir/*": ["components/dir/*"],
      "@file": ["components/file.ts"]
    }
  },
}

インポート

ディレクトリのエイリアス

「src/index.ts」から、エイリアスを使わない「dir」配下の「fileee.ts」をインポートする方法

import fileee from './components/dir/fileee.ts';

「src/index.ts」から、エイリアスを使った「dir」配下の「fileee.ts」をインポートする方法

import fileee from '@dir/fileee.ts';

ファイルのエイリアス

「src/index.ts」から、エイリアスを使わない「file.ts」をインポートする方法

import file from './components/file.ts';

「src/index.ts」から、エイリアスを使った「file.ts」をインポートする方法

import file from '@file';