Naoki Otsu

Create React Appで絶対パスを使う(Absolute Imports)

2019-08-27

設定は一瞬で終わるけど、忘れないうちに備忘録
Create React App は、v3.0.0 以降で絶対パスの import ができるようになった

相対パス

import Component from '../../components/Component'

絶対パス

import Component from 'components/Component'

../を駆使しなくても、ダイレクトにsrc/components/Componentを import 出来るようになった

設定方法

jsconfig.json もしくは tsconfig.json に下記を設定する

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

src のエイリアスがつくので絶対パスで import 出来るようになる
VS Code + TypeScript の定義元ジャンプもきちんと効いていた
これまで .envNODE_PATH=src を指定する方法もあったようだけど、それが必要なくなりそう

Create React App のドキュメントにも記載があった