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 相关文章推荐
javascript 传统事件模型构造的事件监听器实现代码
May 31 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
jquery实现商品拖动选择效果代码(自写)
May 28 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
基于jQuery实现表格的查看修改删除
Aug 01 Javascript
javascript设计模式之策略模式学习笔记
Feb 15 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
Javascript中的async awai的用法
May 17 Javascript
详解vue微信网页授权最终解决方案
Jun 16 Javascript
如何提升vue.js中大型数据的性能
Jun 21 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/02 无线电
一个可查询所有表的“通用”查询分页类
2006/10/09 PHP
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
php分页思路以及在ZF中的使用
2012/05/30 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
PHP cookie,session的使用与用户自动登录功能实现方法分析
2019/06/05 PHP
详解Laravel服务容器的绑定与解析
2019/11/05 PHP
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
解析javascript 实用函数的使用详解
2013/05/10 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
详解Vue方法与事件
2017/03/09 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
使用Vue实现移动端左滑删除效果附源码
2019/05/16 Javascript
vue - vue.config.js中devServer配置方式
2019/10/30 Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
2020/08/04 Javascript
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
python自动化报告的输出用例详解
2018/05/30 Python
一文了解Python并发编程的工程实现方法
2019/05/31 Python
python重要函数eval多种用法解析
2020/01/14 Python
python绕过图片滑动验证码实现爬取PTA所有题目功能 附源码
2021/01/06 Python
python 实现的车牌识别项目
2021/01/25 Python
HTML5 新标签全部总汇(推荐)
2016/06/13 HTML / CSS
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
C和C++经典笔试题附答案解析
2014/08/18 面试题
证券期货行业个人的自我评价
2013/12/26 职场文书
违反工作纪律检讨书
2014/02/15 职场文书
生物制药专业求职信
2014/03/11 职场文书
2014年医学生毕业自我鉴定
2014/03/26 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
老兵退伍标语
2014/10/07 职场文书
领导干部群众路线剖析材料
2014/10/09 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书