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 相关文章推荐
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
jQuery实现锚点scoll效果实例分析
Mar 10 Javascript
JS中递归函数
Jun 17 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
百度多文件异步上传控件webuploader基本用法解析
Nov 07 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
vue复合组件实现注册表单功能
Nov 06 Javascript
利用原生js实现html5小游戏之打砖块(附源码)
Jan 03 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
Nov 02 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
浅析get与post的一些特殊情况
2014/07/28 PHP
php计算两个日期相差天数的方法
2015/03/14 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
Laravel框架模板继承操作示例
2018/06/11 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
Pro JavaScript Techniques学习笔记
2010/12/28 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)
2016/12/14 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
如何理解jQuery中的ajaxSubmit方法
2017/03/13 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
2017/07/11 jQuery
详解VueJS 数据驱动和依赖追踪分析
2017/07/26 Javascript
微信小程序对接七牛云存储的方法
2017/07/30 Javascript
vue实现微信获取用户信息的方法
2019/03/21 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
2019/07/26 jQuery
js实现窗口全屏示例详解
2019/09/17 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
python求一个字符串的所有排列的实现方法
2020/02/04 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
HTML5 声明兼容IE的写法
2011/05/16 HTML / CSS
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
技校毕业生自荐书
2014/05/23 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL