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 @内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章主要介绍了ReactJs设置css样式的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
react搭建环境时执行npm start报错start: 'react-scripts&
这篇文章主要介绍了react搭建环境时执行npm start报错start: 'react-scripts start'的解决方案,具有很好的参考价值,希望杜对大家有所帮助,2023-10-10
这篇文章主要介绍了React less 实现纵横柱状图示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-09-09
这篇文章主要介绍了react中的渲染机制以及相关的优化方案，内容包括react渲染步骤、concurrent机制以及产生作用的机会，简单模拟实现 concurrent mode，基于作业调度优先级的思路进行项目优化的两个hooks，感兴趣的小伙伴跟着小编一起来看看吧2023-07-07
这篇文章主要介绍了react-three-fiber实现3D粒子效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要为大家介绍了每天学习一个hooks useMount，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
这篇文章主要为大家介绍了react+antd+upload结合使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
在TypeScript (TSX) 中编写 CSS 样式类有几种方法,包括使用纯 CSS、CSS Modules、Styled Components 等,本文给大家介绍了几种常见方法的示例,通过代码示例讲解的非常详细,需要的朋友可以参考下2024-07-07
这篇文章主要为大家介绍了ReactNative支付密码输入框实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要为大家详细介绍了React实现二级联动效果，楼梯效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-09-09
最新评论