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のドキュメントにも記載があった