React-配置别名@

FOREVER-Q2024-03-14 19:17

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/*"
                ]
        }
    }
}