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目录了,看下替换以后的效果,确实可以使代码简洁、可读性更高,并且方便重构和迁移路径。

相关推荐
C2X13 分钟前
Vue3.0 学习总结
前端
汤姆Tom15 分钟前
CSS 新特性与未来趋势
前端·css·面试
尘世中一位迷途小书童15 分钟前
🚀 pnpm + Monorepo 实战指南:现代前端项目管理的最佳实践
前端·架构
杨超越luckly29 分钟前
HTML应用指南:利用GET请求获取全国中国建设银行网点位置信息
前端·arcgis·html·数据可视化·门店数据
王翼鹏31 分钟前
html 全角空格和半角空格
前端·html
敲代码的嘎仔32 分钟前
JavaWeb零基础学习Day2——JS & Vue
java·开发语言·前端·javascript·数据结构·学习·算法
CsharpDev-奶豆哥35 分钟前
jq获取html字符串中的图片逐个修改并覆盖原html的解决方案
前端·html
Keepreal4961 小时前
pdf文件预览实现
javascript·react.js
IT_陈寒1 小时前
Python性能优化:用这5个鲜为人知的内置函数让你的代码提速50%
前端·人工智能·后端
简小瑞1 小时前
VSCode源码解密:一行代码解决内存泄漏难题
前端·设计模式·visual studio code