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 相关文章推荐
测试你的JS的掌握程度的代码
Dec 09 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
jquery模拟alert的弹窗插件
Jul 31 Javascript
JavaScript实现横向滑出的多级菜单效果
Oct 09 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
JavaScript必知必会(六) delete in instanceof
Jun 08 Javascript
js时间戳与日期格式之间相互转换
Dec 11 Javascript
Vue 中使用vue2-highcharts实现曲线数据展示的方法
Mar 05 Javascript
angular6的响应式表单的实现
Oct 10 Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 Vue.js
原生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数组无限分级数据的层级化处理代码
2012/12/29 PHP
简单的php文件上传(实例)
2013/10/27 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
ThinkPHP模板替换与系统常量及应用实例教程
2014/08/22 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
Laravel框架控制器的middleware中间件用法分析
2019/09/30 PHP
PHP类的自动加载与命名空间用法实例分析
2020/06/05 PHP
HTML中不支持静态Expando的元素的问题
2007/03/08 Javascript
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
javascript中对变量类型的判断方法
2015/08/09 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
2016/03/01 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
vue中实现滚动加载更多的示例
2017/11/08 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
Django中几种重定向方法
2015/04/28 Python
python轻松查到删除自己的微信好友
2016/01/10 Python
Python实现读写sqlite3数据库并将统计数据写入Excel的方法示例
2017/08/07 Python
解决pycharm无法调用pip安装的包问题
2018/05/18 Python
通过python顺序修改文件名字的方法
2018/07/11 Python
详解Python字符串切片
2019/05/20 Python
python列表每个元素同增同减和列表元素去空格的实例
2019/07/20 Python
Python八皇后问题解答过程详解
2019/07/29 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
如何实现jdbc性能优化
2012/07/30 面试题
nohup的用法
2014/08/10 面试题
创业计划书中包含的9个方面
2013/12/26 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
2014年驻村干部工作总结
2014/11/17 职场文书
小学六年级班主任工作经验交流材料
2015/11/02 职场文书
Python 阶乘详解
2021/10/05 Python
PostgreSQL13基于流复制搭建后备服务器的方法
2022/01/18 PostgreSQL
Three.js实现雪糕地球的使用示例详解
2022/07/07 Javascript