在 Create React App 中使用絕對路徑

6月 26 2022 React

很實用的設定。

簡述

雖然官方文件裡就有補充這一點，不過還是想順便記錄一下。

簡單來說，在沒做任何設定時，當我們要 import 時都只能用「相對路徑」，像這樣：

// 假設目前位置為 src/components/Component
import { getUser } from "../utils/api"

function Component () {
  return ...
}

很明顯的缺點是當資料結構越複雜時，路徑就會變得越難處理。

所以只要加上一個設定後，就可以變成這樣：

import { getUser } from "utils/api"

function Component () {
  return ...
}

改用絕對路徑的方式來設定會簡單許多。

如果是 JS 的話建立 jsconfig.json，TS 的話建立 tsconfig.json，然後加上這段：

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

應該看一下內容就知道這是把 baseUrl 的位置設為 src，所以當我想用任何 src 底下的東西時，只要 dir/***/*** 就能直接搞定了。