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/*"
                ]
        }
    }
}
相关推荐
汪汪大队u10 分钟前
为什么 filter-policy 仅对 ASBR 的出方向生效,且即使在该生效场景下,被过滤的路由在协议内部(如协议数据库)依然存在,没有被彻底移除?
服务器·前端·网络
慧一居士16 分钟前
vue.config.js 文件功能介绍,使用说明,对应完整示例演示
前端·vue.js
颜酱19 分钟前
用导游的例子来理解 Visitor 模式,实现AST 转换
前端·javascript·算法
蒙特卡洛的随机游走38 分钟前
Spark的宽依赖与窄依赖
大数据·前端·spark
共享家95271 小时前
QT-常用控件(多元素控件)
开发语言·前端·qt
葱头的故事1 小时前
将传给后端的数据转换为以formData的类型传递
开发语言·前端·javascript
_23331 小时前
vue3二次封装element-plus表格,slot透传,动态slot。
前端·vue.js
jump6801 小时前
js中数组详解
前端·面试
崽崽长肉肉1 小时前
iOS 基于Vision.framework从图片中提取文字
前端
温宇飞1 小时前
Web Abort API - AbortSignal 与 AbortController
前端