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

关于路径别名

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

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

js 复制代码
// from this
import { SearchForm } from "./../../src/components/searchForm";

// to this
import { SearchForm } from "@src/components/searchForm";

令人头疼的路径别名

路径别名固然是非常好,但是在项目中却需要在多处指定,即使你的项目足够简单,只要用了 TypeScript 本上也需要指定两次。

例如你使用 Webpack + TypeScript,你需要在 ebpack.config.jstsconfig.json 中分别指定,如果你使用 Vite 也是要在 vite.config.ts 中指定,多处指定就有可能漏写导致出错,当然我们可以通过 tsconfig-paths-webpack-plugin 和 vite-tsconfig-paths 分别来解决别名统一的问题。

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

原生路径别名

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

配置路径别名,假如有项目结构如下:

zsh 复制代码
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": {
		"#*": "./*"
	}
}

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

ts 复制代码
import { SearchForm } from "#src/components/searchForm";

别名从未如此简单。

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

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

其他工具的支持情况

Webpack

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

Vite

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

TypeScript

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

参考

相关推荐
翻滚吧键盘3 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
苦夏木禾8 分钟前
js请求避免缓存的三种方式
开发语言·javascript·缓存
超级土豆粉16 分钟前
Turndown.js: 优雅地将 HTML 转换为 Markdown
开发语言·javascript·html
秃了也弱了。22 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)42 分钟前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我1 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing1 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心1 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css