前端項目路徑別名終極解決方案
共 2180字，需瀏覽 5分鐘
·
2024-07-22 08:45
關于路徑別名
一個前端項目通常會演變成復雜的嵌套目錄結構。因此，使用相對路徑導入可能會變得更長且更混亂，這可能會對代碼的外觀產(chǎn)生負面影響，并讓辨識代碼的來源變得更加困難，更加重要的是代碼文件位置變動相對路徑就得改變。
使用路徑別名即絕對路徑導入，不僅解決了理解導入路徑的問題，而且還簡化了重構期間代碼移動的過程，美麗且直觀。
// from this
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 分別來解決別名統(tǒng)一的問題。
但是現(xiàn)在我們有一種無需依賴第三方庫即可配置路徑別名的方法。此外，這種方法允許使用別名而不需要構建步驟，重要的是一處指定，四處生效。
原生路徑別名
從 Node.js v12.19.0 開始，開發(fā)人員可以使用 Subpath Imports[1] 在 npm 包中聲明路徑別名。這可以通過 package.json 文件中的 imports 字段來完成。不需要在 npm 上發(fā)布包。在任何目錄中創(chuàng)建一個 package.json 文件就足夠了。因此，這種方法也適用于私人項目。
配置路徑別名，假如有項目結構如下：
my-awesome-project
├── src/
│ ├── components/
│ │ └── searchForm/
│ │ └── form/
│ │ └── index.ts
│ ├── pages/
│ │ └── login/
│ │ └── about/
│ │ └── home/
│ └── mock/
│ └── api/
│ └── index.ts
└── package.json
我們可以在 package.json 中這么配置：
{
"name": "my-awesome-project",
"imports": {
"#*": "./*"
}
}
接下來就是愉快的使用了：
import { SearchForm } from "#src/components/searchForm";
別名從未如此簡單。
這樣設置的原生支持路徑別名理論上有以下優(yōu)點：
-
無需安裝任何第三方庫。 -
無需預先構建或動態(tài)處理導入即可運行代碼。 -
任何使用 ESM 標準導入且基于 Node.js 的工具都支持別名。 -
代碼導航和自動完成編輯器默認支持，而不需要任何額外的設置。
其他工具的支持情況
Webpack
Webpack從 v5.0 開始支持[2]導入字段。路徑別名無需任何額外配置即可使用。
Vite
Vite 4.2.0 版本添加了[3]對導入字段的支持。
TypeScript
目前正在開發(fā) github.com/microsoft/T…[4] 將要作為 5.3 版本的功能發(fā)布。
作者：CondorHero
https://juejin.cn/post/7280745727160434747