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 相关文章推荐
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
Jan 07 Javascript
浅谈jQuery中的checkbox问题
Aug 10 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
深入理解ES6学习笔记之块级作用域绑定
Aug 19 Javascript
vue实现文件上传功能
Aug 13 Javascript
详解vue配置后台接口方式
Mar 29 Javascript
浅谈React Native 传参的几种方式(小结)
May 21 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
May 26 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
php 文件上传类代码
2011/08/06 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
浅谈web上存漏洞及原理分析、防范方法(安全文件上存方法)
2013/06/29 PHP
php输出全球各个时区列表的方法
2015/03/31 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
jQuery实现的左右移动焦点图效果
2016/01/14 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
javascript过滤数组重复元素的实现方法
2017/05/03 Javascript
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
浅入深出Vue之组件使用
2019/07/11 Javascript
JS实现百度搜索框
2021/02/25 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
利用Python进行异常值分析实例代码
2017/12/07 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
django框架防止XSS注入的方法分析
2019/06/21 Python
PyTorch的深度学习入门之PyTorch安装和配置
2019/06/27 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
经贸日语毕业生自荐信
2013/11/03 职场文书
学生会竞选演讲稿怎么写
2014/08/26 职场文书
殡葬服务心得体会
2014/09/11 职场文书
解除劳动合同协议书
2014/09/17 职场文书
2014年手术室工作总结
2014/11/26 职场文书
标准演讲稿格式结尾应该怎么书写?
2019/07/17 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers
SQL Server 中的事务介绍
2022/05/20 SQL Server