前端項(xiàng)目路徑別名終極解決方案
共 2180字，需瀏覽 5分鐘
·
2024-07-10 09:10
關(guān)于路徑別名
一個(gè)前端項(xiàng)目通常會(huì)演變成復(fù)雜的嵌套目錄結(jié)構(gòu)。因此，使用相對(duì)路徑導(dǎo)入可能會(huì)變得更長(zhǎng)且更混亂，這可能會(huì)對(duì)代碼的外觀產(chǎn)生負(fù)面影響，并讓辨識(shí)代碼的來(lái)源變得更加困難，更加重要的是代碼文件位置變動(dòng)相對(duì)路徑就得改變。
使用路徑別名即絕對(duì)路徑導(dǎo)入，不僅解決了理解導(dǎo)入路徑的問(wèn)題，而且還簡(jiǎn)化了重構(gòu)期間代碼移動(dòng)的過(guò)程，美麗且直觀。
// from this
import { SearchForm } from "./../../src/components/searchForm";
// to this
import { SearchForm } from "@src/components/searchForm";
令人頭疼的路徑別名
路徑別名固然是非常好，但是在項(xiàng)目中卻需要在多處指定，即使你的項(xiàng)目足夠簡(jiǎn)單，只要用了 TypeScript 本上也需要指定兩次。
例如你使用 Webpack + TypeScript，你需要在 ebpack.config.js 和 tsconfig.json 中分別指定，如果你使用 Vite 也是要在 vite.config.ts 中指定，多處指定就有可能漏寫導(dǎo)致出錯(cuò)，當(dāng)然我們可以通過(guò) tsconfig-paths-webpack-plugin 和 vite-tsconfig-paths 分別來(lái)解決別名統(tǒng)一的問(wèn)題。
但是現(xiàn)在我們有一種無(wú)需依賴第三方庫(kù)即可配置路徑別名的方法。此外，這種方法允許使用別名而不需要構(gòu)建步驟，重要的是一處指定，四處生效。
原生路徑別名
從 Node.js v12.19.0 開始，開發(fā)人員可以使用 Subpath Imports[1] 在 npm 包中聲明路徑別名。這可以通過(guò) package.json 文件中的 imports 字段來(lái)完成。不需要在 npm 上發(fā)布包。在任何目錄中創(chuàng)建一個(gè) package.json 文件就足夠了。因此，這種方法也適用于私人項(xiàng)目。
配置路徑別名，假如有項(xiàng)目結(jié)構(gòu)如下：
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": {
"#*": "./*"
}
}
接下來(lái)就是愉快的使用了：
import { SearchForm } from "#src/components/searchForm";
別名從未如此簡(jiǎn)單。
這樣設(shè)置的原生支持路徑別名理論上有以下優(yōu)點(diǎn)：
-
無(wú)需安裝任何第三方庫(kù)。 -
無(wú)需預(yù)先構(gòu)建或動(dòng)態(tài)處理導(dǎo)入即可運(yùn)行代碼。 -
任何使用 ESM 標(biāo)準(zhǔn)導(dǎo)入且基于 Node.js 的工具都支持別名。 -
代碼導(dǎo)航和自動(dòng)完成編輯器默認(rèn)支持，而不需要任何額外的設(shè)置。
其他工具的支持情況
Webpack
Webpack從 v5.0 開始支持[2]導(dǎo)入字段。路徑別名無(wú)需任何額外配置即可使用。
Vite
Vite 4.2.0 版本添加了[3]對(duì)導(dǎo)入字段的支持。
TypeScript
目前正在開發(fā) github.com/microsoft/T…[4] 將要作為 5.3 版本的功能發(fā)布。
作者：CondorHero
https://juejin.cn/post/7280745727160434747