前端项目路径别名解决方案

![图片](http://banmag.cn:8089/i/2024/07/02/66835a91123ba.jpeg)

## **关于路径别名**

一个前端项目通常会演变成复杂的嵌套目录结构。因此，使用相对路径导入可能会变得更长且更混乱，这可能会对代码的外观产生负面影响，并让辨识代码的来源变得更加困难，更加重要的是代码文件位置变动相对路径就得改变。

使用路径别名即绝对路径导入，不仅解决了理解导入路径的问题，而且还简化了重构期间代码移动的过程，美丽且直观。

```js
// 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 分别来解决别名统一的问题。

但是现在我们有一种无需依赖第三方库即可配置路径别名的方法。此外，这种方法允许使用别名而不需要构建步骤，重要的是**一处指定，四处生效**。

## **原生路径别名**

从 Node.js v12.19.0 开始，开发人员可以使用 **Subpath Imports**[1] 在 npm 包中声明路径别名。这可以通过 `package.json` 文件中的 `imports` 字段来完成。不需要在 npm 上发布包。在任何目录中创建一个 `package.json` 文件就足够了。因此，这种方法也适用于私人项目。

配置路径别名，假如有项目结构如下：

```bash
my-awesome-project  
├── src/  
│ ├── components/  
│ │ └── searchForm/  
│ │ └── form/  
│ │ └── index.ts  
│ ├── pages/  
│ │ └── login/  
│ │ └── about/  
│ │ └── home/ 
│ └── mock/  
│ └── api/  
│ └── index.ts  
└── package.json
```

我们可以在 `package.json` 中这么配置：

```json
{
 "name": "my-awesome-project",
 "imports": {
  "#*": "./*"
 }
}
```

接下来就是愉快的使用了：

```js
import { SearchForm } from "#src/components/searchForm";
```

别名从未如此简单。

这样设置的原生支持路径别名理论上有以下优点：

- 无需安装任何第三方库。
- 无需预先构建或动态处理导入即可运行代码。
- 任何使用 ESM 标准导入且基于 Node.js 的工具都支持别名。
- 代码导航和自动完成编辑器默认支持，而不需要任何额外的设置。

## **其他工具的支持情况**

### **Webpack**

Webpack从 v5.0 开始**支持**[2]导入字段。路径别名无需任何额外配置即可使用。

### **Vite**

Vite 4.2.0 版本**添加了**[3]对导入字段的支持。

### **TypeScript**

目前正在开发 **github.com/microsoft/T…**[4] 将要作为 5.3 版本的功能发布。

> 原文地址 https://mp.weixin.qq.com/s/lm1Fa6GCmkc7SzHyrjQEZA