云南微网站建设的公司有哪些,咨询公司怎么注册,培训机构seo,织梦网站熊掌号改造怎么做一、简介 在 Vue 项目当中#xff0c;可以使用 来表示 src/#xff0c;但在 React 项目中#xff0c;默认却没有该功能#xff0c;因此需要进行手动的配置来实现该功能。 别名主要解决的问题#xff1a;每个页面都使用路径的方式进行引入#xff0c;这样很麻烦#xff…一、简介 在 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;
