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

原生路径解决

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

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

my-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";