關于路徑別名
一個前端項目通常會演變成復雜的嵌套目錄結構。因此，使用相對路徑導入可能會變得更長且更混亂，這可能會對代碼的外觀產生負面影響，并讓辨識代碼的來源變得更加困難，更加重要的是代碼文件位置變動相對路徑就得改變。
使用路徑別名即絕對路徑導入，不僅解決了理解導入路徑的問題，而且還簡化了重構期間代碼移動的過程，美麗且直觀。
import { SearchForm } from "./../../src/components/searchForm";
// to this
import { SearchForm } from "@src/components/searchForm";
令人頭疼的路徑別名
路徑別名固然是非常好，但是在項目中卻需要在多處指定，即使你的項目足夠簡單，只要用了 TypeScript 本上也需要指定兩次。
例如你使用 Webpack + TypeScript，你需要在** ebpack.config.js 和 tsconfig.json中分別指定，如果你使用 Vite 也是要在 **vite.config.ts 中指定，多處指定就有可能漏寫導致出錯，當然我們可以通過 tsconfig-paths-webpack-plugin 和 vite-tsconfig-paths 分別來解決別名統一的問題。
但是現在我們有一種無需依賴第三方庫即可配置路徑別名的方法。此外，這種方法允許使用別名而不需要構建步驟，重要的是?一處指定，四處生效?。
原生路徑別名
從 Node.js v12.19.0 開始，開發人員可以使用 Subpath Imports(//nodejs.org/api/packages.html#subpath-imports) 在 npm 包中聲明路徑別名。這可以通過 package.json 文件中的 imports 字段來完成。不需要在 npm 上發布包。在任何目錄中創建一個package.json 文件就足夠了。因此，這種方法也適用于私人項目。
my-awesome-project
├── src/
│ ├── components/
│ │ └── searchForm/
│ │ └── form/
│ │ └── index.ts
│ ├── pages/
│ │ └── login/
│ │ └── about/
│ │ └── home/
│ └── mock/
│ └── api/
│ └── index.ts
└── package.json
import { SearchForm } from "#src/components/searchForm";
別名從未如此簡單。
這樣設置的原生支持路徑別名理論上有以下優點：
- 無需安裝任何第三方庫。
- 無需預先構建或動態處理導入即可運行代碼。
- 任何使用 ESM 標準導入且基于 Node.js 的工具都支持別名。
- 代碼導航和自動完成編輯器默認支持，而不需要任何額外的設置。
其他工具的支持情況
Webpack
Webpack從 v5.0 開始支持(//github.com/webpack/webpack/releases/tag/v5.0.0-beta.31)導入字段。路徑別名無需任何額外配置即可使用。
Vite
Vite 4.2.0 版本添加了(//github.com/vitejs/vite/pull/7770)對導入字段的支持。
TypeScript
目前正在開發 //github.com/microsoft/TypeScript/pull/55015 將要作為 5.3 版本的功能發布。
