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 相关文章推荐
在html页面中包含共享页面的方法
Oct 24 Javascript
JavaScript控制Session操作方法
Jan 17 Javascript
jquery通过load获取文件的内容并跳到锚点的方法
Jan 29 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
JavaScript中定时控制Throttle、Debounce和Immediate详解
Nov 17 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
js中如何完美的解析数据
Mar 18 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 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函数之子字符串替换 str_replace
2011/03/23 PHP
浅谈Eclipse PDT调试PHP程序
2014/06/09 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
js实例属性和原型属性示例详解
2014/11/23 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
jQuery.form插件的使用及跨域异步上传文件
2016/04/27 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
Vue表单实例代码
2016/09/05 Javascript
JS获得多个同name 的input输入框的值的实现方法
2017/01/09 Javascript
Bootstrap列表组学习使用
2017/02/09 Javascript
web3.js增加eth.getRawTransactionByHash(txhash)方法步骤
2018/03/15 Javascript
vue2.0的虚拟DOM渲染思路分析
2018/08/09 Javascript
原生JS实现微信通讯录
2020/06/18 Javascript
小程序实现列表展开收起效果
2020/07/29 Javascript
搭建vscode+vue环境的详细教程
2020/08/31 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
详解Python中for循环的使用方法
2015/05/14 Python
Python随机生成带特殊字符的密码
2016/03/02 Python
windows下安装Python和pip终极图文教程
2017/03/05 Python
Python变量赋值的秘密分享
2018/04/03 Python
python 处理dataframe中的时间字段方法
2018/04/10 Python
Python3匿名函数用法示例
2018/07/25 Python
python中几种自动微分库解析
2019/08/29 Python
python3.4中清屏的处理方法
2020/07/06 Python
django ObjectDoesNotExist 和 DoesNotExist的用法
2020/07/09 Python
python关于倒排列的知识点总结
2020/10/13 Python
非常详细的C#面试题集
2016/07/13 面试题
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
浅谈react路由传参的几种方式
2021/03/23 Javascript
应届生学校辅导员求职信
2013/11/07 职场文书
高中军训第一天感言
2014/03/06 职场文书
实习评语大全
2014/04/26 职场文书
环保倡议书怎么写
2014/05/16 职场文书
离婚起诉书范文2015
2015/05/19 职场文书
Python入门之使用pandas分析excel数据
2021/05/12 Python