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 相关文章推荐
xml和web特殊字符
Apr 28 Javascript
用户注册常用javascript代码
Aug 29 Javascript
Grid得到选择行数据的方法总结
Jan 17 Javascript
JavaScript实现重置表单(reset)的方法
Apr 02 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
Vue.JS入门教程之列表渲染
Dec 01 Javascript
js实现动态显示时间效果
Mar 06 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
Aug 26 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
手写实现JS中的new
Nov 07 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
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
打造计数器DIY三步曲(中)
2006/10/09 PHP
深入解析php中的foreach问题
2013/06/30 PHP
php获取字段名示例分享
2014/03/03 PHP
php管理nginx虚拟主机shell脚本实例
2014/11/19 PHP
使用ltrace工具跟踪PHP库函数调用的方法
2016/04/25 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
发两个小东西,ASP/PHP 学习工具。 用JavaScript写的
2007/04/12 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
通过Jquery.cookie.js实现展示浏览网页的历史记录超管用
2015/10/23 Javascript
jstree单选功能的实现方法
2017/06/07 Javascript
JS实现按钮添加背景音乐示例代码
2017/10/17 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
JS跨域请求的问题解析
2018/12/03 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
微信小程序如何实现精确的日期时间选择器
2020/01/21 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
js实现日历
2020/11/07 Javascript
Python实现的检测网站挂马程序
2014/11/30 Python
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
Windows下安装Django框架的方法简明教程
2018/03/28 Python
Python 输出时去掉列表元组外面的方括号与圆括号的方法
2018/12/24 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
Python单元和文档测试实例详解
2019/04/11 Python
python爬虫---requests库的用法详解
2020/09/28 Python
德国知名健康零食网上商店:Seeberger
2017/07/27 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
面向对象编程是如何提高软件开发水平的
2014/05/06 面试题
会计毕业自我鉴定
2014/02/05 职场文书
2016年全国爱眼日宣传教育活动总结
2016/04/05 职场文书
Python Pandas读取Excel日期数据的异常处理方法
2022/02/28 Python