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

相关推荐
刘一说8 小时前
深入理解 Spring Boot 嵌入式 Web 容器:从原理到性能调优
前端·spring boot·firefox
你的人类朋友8 小时前
设计模式的原则有哪些?
前端·后端·设计模式
!执行9 小时前
Web3 前端与合约交互
前端·web3·1024程序员节
潘小安9 小时前
跟着 AI 学(二)- Quill 接入速通
前端
十里-9 小时前
在 Vue2 中为 Element-UI 的 el-dialog 添加拖拽功能
前端·vue.js·ui
shada9 小时前
从Google Chrome商店下载CRX文件
前端·chrome
左耳咚9 小时前
项目开发中从补码到精度丢失的陷阱
前端·javascript·面试
黑云压城After10 小时前
vue2实现图片自定义裁剪功能(uniapp)
java·前端·javascript
芙蓉王真的好110 小时前
NestJS API 提示信息规范:让日志与前端提示保持一致的方法
前端·状态模式
dwedwswd10 小时前
技术速递|从 0 到 1:用 Playwright MCP 搭配 GitHub Copilot 搭建 Web 应用调试环境
前端·github·copilot