React 配置别名 @ ( js/ts 项目中通过 webpack.config.js 配置)

一、简介

  • Vue 项目当中,可以使用 @ 来表示 src/,但在 React 项目中,默认却没有该功能,因此需要进行手动的配置来实现该功能。

    别名主要解决的问题:每个页面都使用路径的方式进行引入,这样很麻烦,效率很低,这个时候可以配置一个别名,来直接使用别名引入。

  • 使用 @craco/craco 可以在不释放 React 隐藏配置($ npm run eject)的情况下就能配置好别名,参考文章

二、js + react 项目

js 复制代码
// 第一步:释放 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 项目

js 复制代码
// 第一步:释放 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";
相关推荐
zhougl9962 小时前
html处理Base文件流
linux·前端·html
花花鱼2 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_2 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo3 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
TDengine (老段)4 小时前
TDengine 中的关联查询
大数据·javascript·网络·物联网·时序数据库·tdengine·iotdb
杉之5 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端5 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡5 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木6 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!7 小时前
优选算法系列(5.位运算)
java·前端·c++·算法