一、简介
-
在
Vue项目当中，可以使用@来表示src/，但在React项目中，默认却没有该功能，因此需要进行手动的配置来实现该功能。别名主要解决的问题：每个页面都使用路径的方式进行引入，这样很麻烦，效率很低，这个时候可以配置一个别名，来直接使用别名引入。
-
使用
@craco/craco可以在不释放React隐藏配置（$ npm run eject）的情况下就能配置好别名，参考文章。
二、js + react 项目
// 第一步：释放 React 项目的配置文件，如果已经释放，则省略此步
// 注意：这里也可以不用释放，安装某些库来实现部分修改配置，看个人需要
$ npm run eject
// 第二步：找到 webpack.config.js 文件
// 找到 resolve 下的 alias 配置项，添加以下两行配置：
resolve: {
// 配置别名
alias: {
// 自定义别名
"@": paths.appSrc,
"HOOkS": path.resolve(paths.appSrc, "hooks/index"),
// ....其他的一些配置
}
}
// 第三步：创建相关测试文件
// 在 src 目录下，创建一个 hooks 目录，里面创建一个 index.js
// index.js 当中，分别暴露两个函数：
// export function test1(){ console.log(111); }
// export function test2(){ console.log(222); }
// 第四步：启动项目并使用
// 以下两种导入方式都可以成功进行导入
import {
test1, test2 } from "@/hooks/index";
import {
test1, test2 } from "HOOkS";
test1();
test2();
三、ts + react 项目
// 第一步：释放 React 项目的配置文件，如果已经释放，则省略此步
// 注意：这里也可以不用释放，安装某些库来实现部分修改配置，看个人需要
$ npm run eject
// 第二步：找到 webpack.config.js 文件
// 找到 resolve 下的 alias 配置项，添加以下配置：
resolve: {
// 配置别名
alias: {
// 自定义别名
"@": paths.appSrc,
"interface": ["src/interface"],
"api": path.resolve(paths.appSrc, "api"),
"utils": path.resolve(paths.appSrc, "utils"),
// ....其他的一些配置
}
}
// 第三步：在项目根路径下创建：paths.json 文件，内容如下所示：
// 这里单独创建一个 paths.json 文件，是为了跟 tsconfig.json 原始文件区分开，如果不需要区分开也可以直接在 tsconfig.json 中进行追加。
// baseUrl 设置为 ./ 也就是设置为了基于 tsconfig.json 的 ./
// paths当中的配置，都是基于baseUrl的
// "api/*": ["src/api/*"]
// 代表遇到 import {} from "api/*" 时，就从 src/api/* 中引入
// 这里的规则可以参考 TS 的文档：https://www.tslang.cn/docs/handbook/module-resolution.html
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"],
"interface": ["src/interface"],
"api/*": ["src/api/*"],
"utils/*": ["src/utils/*"]
}
}
}
// 第四步：在项目根路径下的 tsconfig.json 当中添加以下代码：
// 即往 compilerOptions 当中添加："extends": "./paths.json"
{
"compilerOptions": {
"extends": "./paths.json"
}
}
// 第五步：创建以下目录和文件
// src/api/rights.ts
// src/utils/menuUtils.ts
// src/interface/index.ts
// 第六步：使用
// 注意：（getMenuList、filterMenuForRender、menuItemInterface是对应文件当中导出的内容，这里就是根据个人情况进行导出）
import {
getMenuList } from "api/rights";
import {
filterMenuForRender } from "utils/menuUtils";
import {
menuItemInterface } from "interface";