Reactのimportに絶対パスを使う

公開:2020/11/07
更新:2020/11/22
1 min読了の目安(約700字TECH技術記事

あるプロジェクトで絶対パスでComponentをimportしていることを知り,調べて試してみたら,めっちゃ簡単だった.

方法

jsconfig.jsonまたは,tsconfig.jsonに以下を追加
"baseUrl": "src"の一文を該当の箇所に追加)

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

⚠️この場合はデフォルトの絶対パスが,srcから始まるので注意!!

プロジェクトフォルダから絶対パスしたい場合は,

{
  "compilerOptions": {
    "baseUrl": "."
 }
}

これだけでOK!!

実用例

src/recoil/atoms.jsの場合なら,

import { userState, postsState } from 'recoil/atoms.js'

State管理系のimportが統一感なくてだるいと思ってたので,良き.

【参考文献・参考記事など】
https://qiita.com/GenkiAma/items/a48a8ac4c749e92053ef
https://qiita.com/ozaki25/items/0b13b7dc8230a43f9e7b