React-配置别名@

1.概念

说明:路径解析配置(webpack),把@/解析为src/;路径联想配置(VsCode),VsCode在输入@/时,自动联想出来对应的src/下的子级目录。CRA本身把webpacki配置包装到了黑盒里无法直接修改,需要借助一个插件-craco。

2.实现步骤

2.1安装craco

npm i -D @craco/craco

2.2配置文件

说明:项目根目录下创建配置文件craco.config.js

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

module.exports={
    // webpack配置
    webpack:{
        // 配置别名
        alias:{
            // 约定制定
            '@':path.resolve(__dirname,'src')
        }
    }
}

2.3配置启动

说明:包文件中配置启动和打包命令。

2.4联想路径配置

说明: VsCode的联想配置,需要我们在项目目录下添加jsconfig,json文件,加入配置之后VsCode会自动读取配置帮助我们自动联想提示。

javascript 复制代码
{
    "compilerOptions": {
        "baseUrl":"./",
        "paths":{
            "@/*":[
                "src/*"
                ]
        }
    }
}
相关推荐
一枚前端小能手4 分钟前
「周更第6期」实用JS库推荐:InversifyJS
前端·javascript
Hilaku5 分钟前
"事件委托"这个老古董,在现代React/Vue里还有用武之地吗?
前端·javascript·vue.js
前端缘梦10 分钟前
Webpack 5 核心升级指南:从配置优化到性能提升的完整实践
前端·面试·webpack
汤姆Tom17 分钟前
现代 CSS 架构与组件化:构建可扩展的样式系统
前端·css
偷光17 分钟前
浏览器中的隐藏IDE: Console (控制台) 面板
开发语言·前端·ide·php
时间的情敌24 分钟前
对Webpack的深度解析
前端·webpack·node.js
拜无忧31 分钟前
【案例】可视化模板,驾驶舱模板,3x3,兼容移动
前端·echarts·数据可视化
向葭奔赴♡38 分钟前
前端框架学习指南:提升开发效率
前端·javascript·vue.js
小高00742 分钟前
🔥🔥🔥Vue 3.5 核弹级小补丁:useTemplateRef 让 ref 一夜失业?
前端·javascript·vue.js
小许哥43 分钟前
如何把微信小程序转换成支付宝小程序
前端