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 仿关机效果的图片层
Dec 26 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
jQuery实现下拉框左右移动(全部移动,已选移动)
Apr 15 Javascript
js 动态生成html 触发事件传参字符转义的实例
Feb 14 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
vue获取当前激活路由的方法
Mar 17 Javascript
微信小程序实现人脸检测功能
May 25 Javascript
JS猜数字游戏实例讲解
Jun 30 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
Jul 24 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/01 无线电
透析PHP的配置文件php.ini
2006/10/09 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
PHP的魔术常量__METHOD__简介
2014/07/08 PHP
php实现用户注册密码的crypt加密
2017/06/08 PHP
使用Zttp简化Guzzle 调用
2017/07/02 PHP
jQuery之折叠面板的深入解析
2013/06/19 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
JS中split()用法(将字符串按指定符号分割成数组)
2016/10/24 Javascript
javascript中闭包概念与用法深入理解
2016/12/15 Javascript
jquery拼接ajax 的json和字符串拼接的方法
2017/03/11 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
动态加载权限管理模块中的Vue组件
2018/01/16 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
其实你可以少写点if else与switch(推荐)
2019/01/10 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
[36:20]完美世界DOTA2联赛PWL S3 access vs Rebirth 第一场 12.17
2020/12/18 DOTA
python 实现归并排序算法
2012/06/05 Python
深入解析Python中的变量和赋值运算符
2015/10/12 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
pyshp创建shp点文件的方法
2018/12/31 Python
简单了解python 邮件模块的使用方法
2019/07/24 Python
详解python中的index函数用法
2019/08/06 Python
深入学习python多线程与GIL
2019/08/26 Python
python区分不同数据类型的方法
2019/10/14 Python
环保建议书作文
2014/03/12 职场文书
活动新闻稿范文
2015/07/17 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
vue如何在data中引入图片的正确路径
2022/06/05 Vue.js