React添加文件路径时使用@符号代替src目录(非creae-react-app)

在其它项目中看到的可以用@符号来代替src目录,那么在自己的react项目中也必须得尝试一下。本人的项目不是通过create-react-app脚手架来创建的,无法使用craco或者的方案来实现。

  1. jsconfig.json配置

    用的vscode进行开发,查看项目当中是否存在jsconfig.json这个文件,没有的话可以自己创建,然后向文件中添加以下内容:

javascript 复制代码
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}

这个配置的目的是为了让vscode识别@符号,在编写代码时输入@符号后,vscode会进行自动提示

  1. webpack配置

然后在webpack.config.js中添加以下配置,将@符号映射到src目录的绝对路径

javascript 复制代码
const path = require('path');

module.exports = {
  // ...其他配置项

  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src') // 将@符号映射到src目录的绝对路径
    }
  }
};

完成上述两步,重启项目之后,就可以在项目中使用@符号来代替src目录了,看下替换以后的效果,确实可以使代码简洁、可读性更高,并且方便重构和迁移路径。

相关推荐
袁煦丞10 分钟前
AI直接出答案!Perplexica开源搜索引擎:cpolar内网穿透实验室第534个成功挑战
前端·程序员·远程工作
Hilaku12 分钟前
用“人话”讲明白10个最常用的正则表达式
前端·javascript·正则表达式
木叶丸20 分钟前
跨平台方案该如何选择?
android·前端·ios
LL.。23 分钟前
同步回调和异步回调
开发语言·前端·javascript
网络点点滴28 分钟前
Vue如何处理数据、v-HTML的使用及总结
前端·vue.js·html
运维咖啡吧29 分钟前
周一才上线的网站,单单今天已经超过1000访问了
前端·程序员·ai编程
世界哪有真情32 分钟前
用虚拟IP扩容端口池:解决高并发WebSocket端口耗尽问题
前端·后端·websocket
前端世界32 分钟前
打造一个可维护、可复用的前端权限控制方案(含完整Demo)
前端
LeQi38 分钟前
当!important成为代码毒瘤:你的项目是不是也中了招?
前端·css·程序员
玲小珑39 分钟前
Next.js 教程系列(九)增量静态再生 (ISR):动态更新的静态内容
前端·next.js