react ts 專案如何配置路徑別名？

蓓蕾心晴發表於2024-05-08
React

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".", // 路徑配置
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "target": "ES2020",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true, // 允許編譯 JavaScript 檔案
    "skipLibCheck": true, // 跳過所有宣告檔案的型別檢查
    "esModuleInterop": true, // 禁用名稱空間引用 (import * as fs from "fs") 啟用 CJS/AMD/UMD 風格引用 (import fs from "fs")
    "allowSyntheticDefaultImports": true, // 允許從沒有預設匯出的模組進行預設匯入
    "strict": true, // 啟用所有嚴格型別檢查選項
    "forceConsistentCasingInFileNames": true, //    禁止對同一個檔案的不一致的引用。
    "noFallthroughCasesInSwitch": true, // 報告switch語句的fallthrough錯誤。（即，不允許switch的case語句貫穿）
    "module": "esnext", // 指定模組程式碼生成
    "moduleResolution": "node", // 使用 Node.js 風格解析模組
    "resolveJsonModule": true, // 允許使用 .json 副檔名匯入的模組
    "isolatedModules": true, // 將每個檔案作為單獨的模組
    "noEmit": false, // 不輸出(意思是不編譯程式碼，只執行型別檢查)
    "jsx": "react-jsx",
    "noUnusedLocals": false, // 報告未使用的本地變數的錯誤
    "noUnusedParameters": false, // 報告未使用引數的錯誤
    "experimentalDecorators": true, // 啟用對ES裝飾器的實驗性支援
  },
  "include": [
    "src"
  ],
  "exclude": [
    "node_modules",
    "build",
    "**/*.spec.ts"
  ] // 不進行型別檢查的檔案
}

webpack配置同時要配置別名：

react 專案需要透過執行 npm run eject 或 yarn eject 來暴露 webpack 配置，注意這個操作是不可逆的！

執行後會生成 config 資料夾，下面找到 webpack.config.js 進行配置：

搜尋 alias 物件下面新增一行：

 '@': path.resolve(__dirname, '../src/')

這樣透過 @/路徑使用的時候 即可識別到對應路徑的模組，而不會報錯：Uncaught ReferenceError: xxx is not defined

相關文章