create-react-app で 絶対パス(absolute path) をwebpack に頼らず設定する #react

ReactでAbsolute Pathを設定するときに以前と変わっていたので共有も含めて更新！

どういうことかというと
以下のようなファイル構成のときに

|- src
 |- components
  |- Profile
   |- index.jsx
  |- common
   |- Avatar.jsx

ProfileのIndex.jsxからAvatar.jsxを参照するときに

import Avatar from '../common/Avatar'

のように書かなければならないが、以下の設定をすることで

import Avatar from 'common/Avatar'

とかけるようになる！

過去

.env ファイルを作って以下のように定義していた

.env

NODE_PATH=src

現在

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

これまで通り開発しようとしたらすぐに分からず1~2時間ほどハマっていた（汗）

しっかりと公式ドキュメント見ていくべきだった。。

参照先: https://facebook.github.io/create-react-app/docs/importing-a-component#absolute-imports