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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
JavaScript按位运算符的应用简析
Feb 04 Javascript
vue.js利用Object.defineProperty实现双向绑定
Mar 09 Javascript
JS仿Base.js实现的继承示例
Apr 07 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
Apr 19 Javascript
iscroll动态加载数据完美解决方法
Jul 18 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
Jul 24 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
微信小程序里引入SVG矢量图标的方法
Sep 20 Javascript
使用vue制作滑动标签
Sep 21 Javascript
详解Vue数据驱动原理
Nov 17 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下10件你也许并不了解的事情
2008/09/11 PHP
PHP 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
php数组指针函数功能及用法示例
2020/02/11 PHP
JQuery中关于jquery.js与jquery.min.js的比较探讨
2013/05/15 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
2014/06/03 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
2014/06/27 Javascript
jquery实现搜索框常见效果的方法
2015/01/22 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
2016/11/29 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
深入理解Node module模块
2018/03/26 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
详解vue在项目中使用百度地图
2019/03/26 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
vue实现移动端拖动排序
2020/08/21 Javascript
[01:04]DOTA2上海特锦赛现场采访 FreeAgain遭众解说围攻
2016/03/25 DOTA
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
python实现简单的购物程序代码实例
2020/03/03 Python
python闭包、深浅拷贝、垃圾回收、with语句知识点汇总
2020/03/11 Python
Django Path转换器自定义及正则代码实例
2020/05/29 Python
维德科技C#面试题笔试题
2015/12/09 面试题
应届大专毕业生个人自荐信
2013/09/22 职场文书
大学生职业生涯规划范文
2014/01/08 职场文书
小学生安全演讲稿
2014/04/25 职场文书
莫言诺贝尔获奖演讲稿
2014/05/21 职场文书
代收款委托书范本
2014/10/01 职场文书
2015社区精神文明建设工作总结
2015/04/21 职场文书
2015学校图书管理员工作总结
2015/05/11 职场文书
创业计划书之蛋糕店
2019/08/29 职场文书
golang fmt格式“占位符”的实例用法详解
2021/07/04 Golang
 Python 中 logging 模块使用详情
2022/03/03 Python