别名路径配置,实际上分成两部分:
1)广泛意义上的路径解析配置(Webpack),把@/
解析为src/
2)路径联想配置(是针对vscode编译器的配置),vscode在输入@/
时,自动联想出来对应的src/
下的子级目录。
路径解析配置
craco插件介绍
CRA(create-react-app)本身把webpack的配置包装到了黑盒里,无法直接修改。如果需要定制,需要借助一个插件craco,这个插件提供了CRA的一些扩展配置。
配置步骤
- 安装craco
npm i -D @craco/craco
- 在项目根目录下创建配置文件 craco.config.js
- 配置文件craco.config.js中添加路径解析配置
- 包文件package.json中修改启动和打包命令,替换原先的启动和打包命令
进行配置
安装craco
安装完成后,package.json文件中自动更新了依赖:
在项目根目录下创建配置文件 craco.config.js,创建解析配置
包文件package.json中修改启动和打包命令
重新启动项目
在vscode集成终端中运行npm run start,重新启动项目。
到代码中验证别名解析是否正确
新建一个文件test.js:
在index.js文件中使用别名导入:
浏览器控制台输出了正确的结果:
联想路径配置
配置步骤
vscode的联想配置,需要我们在项目根目录下面新增 jsconfig.json 文件,加入配置之后,vscode会自动读取配置,帮我们自动联想提示。
步骤:
1)项目根目录下面新增配置文件jsconfig.json
2)在配置文件中增加路径提示配置