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 插件学习(二)
Aug 06 Javascript
jquery操作checkbox示例分享
Jul 21 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
bootstrap基础知识学习笔记
Nov 02 Javascript
JS作用域深度解析
Dec 29 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
微信sdk实现禁止微信分享(使用原生php实现)
Nov 15 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 Javascript
JS实现炫酷轮播图
Nov 15 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下打开URL地址的几种方法小结
2010/05/16 PHP
yii2实现根据时间搜索的方法
2016/05/25 PHP
php  单例模式详细介绍及实现源码
2016/11/05 PHP
Yii 2中的load()和save()示例详解
2017/08/03 PHP
PHP连接SQL Server的方法分析【基于thinkPHP5.1框架】
2019/05/06 PHP
JS提交并解析后台返回的XML的代码
2008/11/03 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
js如何调用qq互联api实现第三方登录
2014/03/28 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
2018/05/09 jQuery
JavaScript实现的拼图算法分析
2019/02/13 Javascript
JavaScript实现简单的图片切换功能(实例代码)
2020/04/10 Javascript
Python素数检测的方法
2015/05/11 Python
python脚本内运行linux命令的方法
2015/07/02 Python
python创建文件时去掉非法字符的方法
2018/10/31 Python
python自定义函数实现最大值的输出方法
2019/07/09 Python
Python: 传递列表副本方式
2019/12/19 Python
PyCharm GUI界面开发和exe文件生成的实现
2020/03/04 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
Jupyter notebook无法导入第三方模块的解决方式
2020/04/15 Python
python更新数据库中某个字段的数据(方法详解)
2020/11/18 Python
小学教师办公室制度
2014/02/03 职场文书
广告设计应届生求职信
2014/03/01 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
食品安全演讲稿
2014/09/01 职场文书
小学生毕业评语
2014/12/26 职场文书
2015年度招聘工作总结
2015/05/28 职场文书
教师节晚会主持词
2015/06/30 职场文书
浅谈Redis在直播场景的实践方案
2021/04/27 Redis
js 实现验证码输入框示例详解
2022/09/23 Javascript