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 相关文章推荐
jquery 清空file域示例(兼容个浏览器)
Oct 11 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
Mar 20 Javascript
jQuery实现倒计时按钮功能代码分享
Sep 03 Javascript
jquery中添加属性和删除属性
Jun 03 Javascript
详解webpack 如何集成第三方js库
Jun 29 Javascript
vue-quill-editor实现图片上传功能
Aug 08 Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 Javascript
解决easyui日期时间框ie的兼容的问题
Mar 01 Javascript
vue如何引入sass全局变量
Jun 28 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
Dec 28 Javascript
JavaScript函数IIFE使用详解
Oct 21 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 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 header 跳转
2013/06/17 PHP
PHP定时执行任务实现方法详解(Timer)
2015/07/30 PHP
PHP7+Nginx的配置与安装教程详解
2016/05/10 PHP
php 可变函数使用小结
2018/06/12 PHP
jQuery ajax cache缓存问题
2010/07/01 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
2012/10/11 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
前端框架Vue.js构建大型应用浅析
2016/09/12 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
详解ES6 CLASS在微信小程序中的应用实例
2020/04/24 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
vue等两个接口都返回结果再执行下一步的实例
2020/09/08 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
Python中asyncore的用法实例
2014/09/29 Python
基于python的七种经典排序算法(推荐)
2016/12/08 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
详解Python3中的迭代器和生成器及其区别
2018/10/09 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
树莓派采用socket方式文件传输(python)
2019/06/22 Python
Python+threading模块对单个接口进行并发测试
2019/06/25 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
Python pandas用法最全整理
2019/08/04 Python
基于Python爬取51cto博客页面信息过程解析
2020/08/25 Python
python实现录制全屏和选择区域录屏功能
2021/02/05 Python
HTML5无刷新改变当前url的代码
2017/03/15 HTML / CSS
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
访谈节目策划方案
2014/05/15 职场文书
租车协议书
2015/01/27 职场文书
作文之亲情600字
2019/09/23 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS