React中用@符号编写文件路径实现方法介绍
更新时间：2022年09月29日 11:03:55 作者：月光晒了很凉快
在Vue中，我们导入文件时，文件路径中可以使用@符号指代src目录，极大的简化了我们对路径的书写。但是react中，要想实现这种方式书写文件路径，需要写配置文件来实现
前言
无论是vue还是react开发，我们通常需要引入路径的便捷化配置，通常我们都会约定使用路径@作为根路径地址。如果是个人react开发的@路径简单配置
安装craco
yarn add @craco/craco
根路径下创建 craco.config.js
const path = require("path")
module.exports = {
webpack:{
alias:{
"@":path.resolve(__dirname,"src")
}
}
}写文件路径
在 config-overrides.js 文件中书写如下代码：
// 增量配置当前项目中的webpack配置，建议在react18中不要用
// 建议在react18中也不要用装饰器
// override 方法，如果webpack中有此配置则，覆盖，如果没有则添加
const path = require('path')
const { override, addWebpackAlias } = require('customize-cra')
// 方案2：自定义
const customConfig = () => config => {
config.resolve.alias['@'] = path.resolve('src')
return config
}
module.exports = override(
// 方案1：使用webpack内置方法
// addWebpackAlias({
// '@': path.resolve('src')
// }),
customConfig()
)上面的两种方案，任选一种即可完成配置，此时我们已经能够实现用@符指代src目录的功能了。
此时我们写这样的代码是不会报错的：
// import countAction from '../../store/actionCreators/countAction' import countAction from '@/store/actionCreators/countAction'
但是在书写时，并不会触发编辑器的提示，没有提示写起来很痛苦，所以我们还需要再写一个配置文件，用作触发书写带有@符的文件路径时，编辑器的自动提示功能。
我们需要新建一个 jsconfig.json 文件，在该文件中书写如下代码：
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
}
}
温馨提示：在 react 项目中，修改配置文件后需要重启项目。
至此，我们就可以愉快地书写代码了。
到此这篇关于React中用@符号编写文件路径实现方法介绍的文章就介绍到这了,更多相关React @内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本文主要介绍了react中antd Upload手动上传的示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家详细介绍了react用Redux中央仓库实现一个todolist，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要为大家介绍了concent渐进式重构react应用的使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
本文主要介绍了React 实现井字棋,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-07-07
这篇文章主要为大家详细介绍了React实现动态调用的弹框组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了原生+React实现懒加载(无限滚动)列表方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
本文主要介绍了React中setState同步异步场景的使用，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
采用React编写小程序的Remax框架的编译流程解析(推荐)
这篇文章主要介绍了采用React编写小程序的Remax框架的编译流程解析(推荐),本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
本文通过实例给大家分享了编写React组件项目实践的全过程，对此有兴趣的朋友可以参考下。2018-03-03
本篇文章主要介绍了React Native日期时间选择组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-04
最新评论