Webpackのresolve.aliasとVSCodeのjsconfig.jsonを使ってimportを快適にする

はじめに

jsでimportをしていてこういうのをコードを書いたこと無いでしょうか？

import { someConstant } from './../../config/constants'
import MyComponent from './../../../components/MyComponent'
import { myActionCreator } from './../../../ducks/someReducer'

いちいちターゲットのファイルとインポート先のファイルの相対パスを確認する必要があってめちゃくちゃ面倒ですよね。そこで今回はwebpackのresolve.aliasとjsconfig.jsonを使って↑のコードを

import { someConstant } from '@config/constants'
import MyComponent from '@components/MyComponent'
import { myActionCreator } from '@ducks/someReducer'

のように書くことが出来、なおかつVSCodeの自動補完も有効にする方法をご紹介します。

webpackのresolve.aliasを設定する

まず今回の説明のために以下のようなディレクトリ構造のプロジェクトを作成しました。

.
├── dist
│   ├── index.html
│   └── main.js
├── src
│   ├── foo
│   │   └── bar
│   │       └── hoge.js
│   └── index.js
└── webpack.config.js

ここでindex.jsからhoge.jsをimportしたいとして特に何も設定しなければ

index.js

import hoge from './src/foo/bar/hoge'

このように書く必要があります。ファイルが1つならいいですがファイルが複数になったりいろんなディレクトリからimportしようとするとどんどん面倒になっていきます。

そこでhogeをもっと簡単にimport出来るようにwebpack.config.jsにresolve.aliasを設定します。

webpack.config.js

const path = require('path');

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

書き方として

resolve: {
  alias: {
    'aliasの名前': 'ターゲットのディレクトリまでの絶対パス'
  }
}

のように書くことでaliasを設定できます。
ここではnodeのpath.resolveと__dirname使って取得しています。

これで先程のhogeは以下のように読み込む事ができます。

import hoge from '@bar/hoge'

VSCodeの自動補完に対応する

aliasを設定するだけでもそれなりに便利ではあるのですが、例えばhoge.jsで以下のような定数をexportした場合

hoge.js

export const AWSOME = 'AWSOME!'

index.jsからAWSOMEを読み込もうとしても自動補完が出てきません。

そこでVSCodeのjsconfig.jsonを設定します。

まず、jsconfig.jsというファイルをプロジェクトルートのディレクトリに作成し

├── dist
│   ├── index.html
│   └── main.js
├── src
│   ├── foo
│   │   └── bar
│   │       └── hoge.js
│   └── index.js
├── jsconfig.json // 作成
└── webpack.config.js

以下のようにpathsに@barを追加します

jsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "allowSyntheticDefaultImports": false,
    "baseUrl": "./",
    "paths": {
      "@bar/*": ["src/foo/bar/*"]
    }
  },
  "exclude": ["node_modules", "dist"]
}

pathsには

"paths": {
  "コードで指定されるパス" : ["baseURLを基準にしたマッピング先のディレクトリへの相対パス"]
}

を書くことでVSCodeはマッピング先を見てくれるようになります。

今回の場合は「@bar と書いたら src/foo/bar」を見てねという意味ですね。

これでもう一度hoge.jsからAWSOMEをインポートしようとすると自動補完が入るようになります!

これを使うとimport先のファイルや変数を探す時間が大幅に短縮できます。
お試しあれ！

参考