React如何利用相对于根目录进行引用组件详解


Posted in Javascript onOctober 09, 2017

前言

本文主要给大家介绍了关于React利用相对于根目录进行引用组件的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧。

在对自己开发的组件中经常会做诸如以下的引用:

import genFetchEntryListArgs from '../../../utils/table/genFetchEntryListArgs';
import { parseQuery, stringifyQuery } from '../../../utils/query';
import mapMyToProps from '../../../utils/connect/mapMyToProps';
import genPagination from '../../../utils/table/pagination';
import handleConfirm from '../../../utils/handleConfirm';
import getBaseQuery from '../../../utils/getBaseQuery';
import setSortQuery from '../../../utils/setSortQuery';
import handleError from '../../../utils/handleError';
import injectProto from '../../../utils/injectProto';
import injectApi from '../../../utils/injectApi';
import querySchema from './querySchema';
import genColumns from './genColumns';

这样使用相对路径引用虽然是比较常见的做法,不过在中大型项目中,引入的组件较多时,写起来也是极其蛋疼的。

当然,我们可以通过使用 webpack 中的 resolve.alias 配置别名,将某些文件目录配置成固定的引入。

例如上面的示例,我们可以将 utils 文件夹设置成一个 utils 别名,以后就可以只需要将 utils 引入就行了,而不需要写一坨 ../../../。

配置设置如下:

const path = require('path');

module.exports = {
 ...
 resolve: {
  alias: {
   'utils': path.resolve(__dirname, '../src/utils'),
  }
 },
 ...
};

最上面的示例经过改写之后,应该如此:

import genFetchEntryListArgs from '../../../utils/table/genFetchEntryListArgs';
import { parseQuery, stringifyQuery } from 'utils/query';
import mapMyToProps from 'utils/connect/mapMyToProps';
import genPagination from 'utils/table/pagination';
import handleConfirm from 'utils/handleConfirm';
import getBaseQuery from 'utils/getBaseQuery';
import setSortQuery from 'utils/setSortQuery';
import handleError from 'utils/handleError';
import injectProto from 'utils/injectProto';
import injectApi from 'utils/injectApi';
import querySchema from './querySchema';
import genColumns from './genColumns';

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
childNodes.length与children.length的区别
May 14 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
Feb 23 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
jquery使用slideDown实现模块缓慢拉出效果的方法
Mar 27 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
ES6中的rest参数与扩展运算符详解
Jul 18 Javascript
使用vue-router完成简单导航功能【推荐】
Jun 28 Javascript
基于Vue-cli快速搭建项目的完整步骤
Nov 03 Javascript
js实现随机点名器精简版
Jun 29 Javascript
React Native中的RefreshContorl下拉刷新使用
Oct 09 #Javascript
JS实现的全排列组合算法示例
Oct 09 #Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 #Javascript
jQuery ajax调用webservice注意事项
Oct 08 #jQuery
js用类封装pop弹窗组件
Oct 08 #Javascript
利用js编写网页进度条效果
Oct 08 #Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
Oct 08 #Javascript
You might like
php date()日期时间函数详解
2010/05/16 PHP
深入file_get_contents函数抓取内容失败的原因分析
2013/06/25 PHP
php实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
php程序内部post数据的方法
2015/03/31 PHP
php lcg_value与mt_rand生成0~1随机小数的效果对比分析
2017/04/05 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
网页javascript精华代码集
2007/01/24 Javascript
Javascript下IE与Firefox下的差异兼容写法总结
2010/06/18 Javascript
JS中的异常处理方法分享
2013/12/22 Javascript
js关于精确计算和数值格式化以及直接引js文件
2014/01/28 Javascript
微信企业号开发之微信考勤Cookies的使用
2015/09/11 Javascript
JS弹出对话框实现方法(三种方式)
2015/12/18 Javascript
基于jQuery倒计时插件实现团购秒杀效果
2016/05/13 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
vue中实现在外部调用methods的方法(推荐)
2018/02/08 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
微信小程序收藏功能的实现代码
2020/06/19 Javascript
Python中类型检查的详细介绍
2017/02/13 Python
Python探索之修改Python搜索路径
2017/10/25 Python
python使用KNN算法手写体识别
2018/02/01 Python
深入理解Python爬虫代理池服务
2018/02/28 Python
如何在Django中设置定时任务的方法示例
2019/01/18 Python
Python匿名函数及应用示例
2019/04/09 Python
浅析Python与Mongodb数据库之间的操作方法
2019/07/01 Python
关于Keras Dense层整理
2020/05/21 Python
Python decimal模块使用方法详解
2020/06/08 Python
如何用python处理excel表格
2020/06/09 Python
python线程池 ThreadPoolExecutor 的用法示例
2020/10/10 Python
python爬虫爬取图片的简单代码
2021/01/18 Python
法律专业学生的自我评价
2014/02/07 职场文书
Go语言应该什么情况使用指针
2021/07/25 Golang
Mybatis-Plus进阶分页与乐观锁插件及通用枚举和多数据源详解
2022/03/21 Java/Android