一、简介
- 在 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";
