react如何快速设置文件路径别名


Posted in Javascript onApril 28, 2021

React是用于构建用户界面的JavaScript库,  起源于Facebook的内部项目,因为该公司对市场上所有 JavaScript MVC框架,都不满意,就决定自己写一套,用来架设Instagram的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。

React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。

React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

由于webpack隐藏了配置文件需要先暴露出来,进入项目目录后在cmd中运行以下代码

npm run eject

react如何快速设置文件路径别名

你确定要退出吗?这种行为是永久的。
输入y 然后回车
运行结束后在项目文件夹中找到config文件夹

react如何快速设置文件路径别名

打开webpack.config.js

react如何快速设置文件路径别名

按下 Ctrl+f 查找 alias 找到配置项

react如何快速设置文件路径别名

配置一下映射,可以参照以下我的配置

alias: {
        "react-native": "react-native-web",
        ...(isEnvProductionProfile && {
          "react-dom$": "react-dom/profiling",
          "scheduler/tracing": "scheduler/tracing-profiling",
        }),
        ...(modules.webpackAliases || {}),
        // 配置文件别名,左边是别名右边是对应的路径
        "@": path.resolve(__dirname, "../src"),
        "@scss": path.resolve(__dirname, "../src/assets/scss"),
        "@images": path.resolve(__dirname, "../src/assets/images"),
        "@views": path.resolve(__dirname, "../src/views"),
        "@components": path.resolve(__dirname, "../src/components"),
      },

配置完成后重新启动一下项目就行了

到此这篇关于react如何快速设置文件路径别名的文章就介绍到这了,更多相关react文件路径别名内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
Jun 28 Javascript
jQuery 关于伪类选择符的使用说明
Apr 24 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
jquery.cookie.js用法实例详解
Dec 25 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
如何制作一个Node命令行图像识别工具
Dec 12 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
Vue实现点击箭头上下移动效果
Jun 11 Javascript
原生JS封装vue Tab切换效果
vue项目两种方式实现竖向表格的思路分析
测量JavaScript函数的性能各种方式对比
Apr 27 #Javascript
比较node.js和Deno
Apr 27 #Javascript
如何用JavaScript检测当前浏览器是无头浏览器
Apr 27 #Javascript
如何利用js在两个html窗口间通信
Apr 27 #Javascript
如何使JavaScript休眠或等待
Apr 27 #Javascript
You might like
php利用腾讯ip分享计划获取地理位置示例分享
2014/01/20 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
CI框架集成Smarty的方法分析
2016/05/17 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
JS array 数组详解
2009/03/22 Javascript
JS如何将UTC格式时间转本地格式
2013/09/04 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
推荐一个封装好的getElementsByClassName方法
2014/12/02 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
用canvas 实现个图片三角化(LOW POLY)效果
2016/02/18 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
详解angular 中的自定义指令之详解API
2017/06/20 Javascript
react-native 圆弧拖动进度条实现的示例代码
2018/04/12 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
js实现每日签到功能
2018/11/29 Javascript
JS使用Prim算法和Kruskal算法实现最小生成树
2019/01/17 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
[07:06]2018DOTA2国际邀请赛寻真——卫冕冠军Team Liquid
2018/08/10 DOTA
利用python代码写的12306订票代码
2015/12/20 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
python重试装饰器的简单实现方法
2019/01/31 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
Python面向对象之多态原理与用法案例分析
2019/12/30 Python
python解释器安装教程的方法步骤
2020/07/02 Python
详解移动端h5页面根据屏幕适配的四种方案
2020/04/15 HTML / CSS
应届硕士毕业生自荐信
2014/05/26 职场文书
政风行风建设责任书
2014/07/23 职场文书
银行授权委托书格式
2014/10/10 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
组织委员竞选稿
2015/11/21 职场文书
2016年暑假学生家长评语
2015/12/01 职场文书
商业计划书范文
2019/04/24 职场文书
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技