使用绝对路径，而不是相对路径
刚接手一个新项目，经常会看到路径里全是 ../../../../../. ，这些路径被称为相对路径。
虽然可以使用，但并不推荐。最佳实践是使用绝对路径，它能提供文件的完整路径。
当然，如果你使用 Webpack 或 TypeScript，需要进行一些配置。
配置 Webpack (create-react-app):
如果你使用 create-react-app，配置绝对路径非常简单。首先，在项目的根目录创建一个名为 jsconfig.json 的文件，然后添加以下内容：
{
"compilerOptions": {
"baseUrl": "src"
},
"include": [
"src"
]
}配置 TypeScript:
如果你使用 TypeScript，则需要在 tsconfig.json 文件中添加以下配置：
{
"compilerOptions": {
"baseUrl": "src",
"paths": {
"@/*": [
"src/*"
]
}
},
"include": [
"src"
]
}这样，你就可以将这段代码：
import { Button } from '../../../../components/Button';
import { Icon } from '../../../../components/Icon';改成更简洁、易读的：
import { Button } from '@/components/Button';
import { Icon } from '@/components/Icon';
import { Input } from '@/components/Input';关于路径别名
一个前端项目通常会演变成复杂的嵌套目录结构。因此，使用相对路径导入可能会变得更长且更混乱，这可能会对代码的外观产生负面影响，并让辨识代码的来源变得更加困难，更加重要的是代码文件位置变动相对路径就得改变。
使用路径别名即绝对路径导入，不仅解决了理解导入路径的问题，而且还简化了重构期间代码移动的过程，美丽且直观。
// from this
import { SearchForm } from '@src/components/searchForm';
import { SearchForm } from './../../src/components/searchForm';
// to this令人头疼的路径别名
路径别名固然是非常好，但是在项目中却需要在多处指定，即使你的项目足够简单，只要用了 TypeScript 本上也需要指定两次。
例如你使用 Webpack + TypeScript，你需要在 webpack.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 文件就足够了。因此，这种方法也适用于私人项目。
配置路径别名，假如有项目结构如下：
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": {
"#*": "./*"
}
}别名从未如此简单。
这样设置的原生支持路径别名理论上有以下优点：
无需安装任何第三方库。
无需预先构建或动态处理导入即可运行代码。
任何使用 ESM 标准导入且基于 Node.js 的工具都支持别名。
代码导航和自动完成编辑器默认支持，而不需要任何额外的设置。 其他工具的支持情况
Webpack Webpack从 v5.0 开始支持[2]导入字段。路径别名无需任何额外配置即可使用。
Vite Vite 4.2.0 版本添加了[3]对导入字段的支持。
TypeScript 将要作为 5.3 版本的功能发布。
Contributors
Long Mo