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


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';

React 使用相对于根目录进行引用组件的更多相关文章

  1. 基于React Native的Material Design风格的组件库 MRN

    基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://git ...

  2. react初探(二)之父子组件通信、封装公共组件

    一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么 ...

  3. react系列(二)高阶组件-HOC

    高阶组件 简单来说,高阶组件可以看做一个函数,且该函数接受一个组件作为参数,并返回一个新的组件. 我在之前的博客<闭包和类>中提到一个观点,面向对象的好处就在于,易于理解,方便维护和复用. ...

  4. React躬行记(3)——组件

    组件(Component)由若干个React元素组成,包含属性.状态和生命周期等部分,满足独立.可复用.高内聚和低耦合等设计原则,每个React应用程序都是由一个个的组件搭建而成,即组成React应用 ...

  5. React 以两种形式去创建组件 类或者函数(二)

    08==>创建组件以 1类的形式 或者以 2函数的形式 09==>使用组件 在src下创建components文件夹 是放组件的 CompType.js 组件 组件开头大写(重要) Com ...

  6. [RN] React Native 好用的时间线 组件

    React Native 好用的时间线 组件 效果如下: 实现方法: 一.组件封装 CustomTimeLine.js "use strict"; import React, {C ...

  7. react第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性)

    第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性) #课程目标 理解路由的原理及应运 理解react-router-dom以及内置的一些组件 合理应用内置组 ...

  8. React 三大属性state,props,refs以及组件嵌套的应用

    React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...

  9. 第七十七篇:ref引用(在vue中引用组件实例)

    好家伙, 为方便理解, 我们先来写一个经典自增一按钮, 再加上一个count清零按钮, Left.vue组件中: <template> <div > <h1>我是L ...

随机推荐

  1. wed.xml 中 filter、servlet 配置格式

    1.wed.xml 中 filter 配置格式 <filter> <filter-name>filterName</filter-name> <filter- ...

  2. 消息队列之--Kafak

    序言 消息丢失如何解决? 解耦 异步 并行 Docker安装Kafak 1.下载镜像 # zookeeper镜像 docker pull wurstmeister/zookeeper # kafka镜 ...

  3. [jvm学习笔记]-类加载过程

    JVM类加载的过程 加载=>验证=>准备=>解析=>初始化 5个阶段所执行的具体动作 加载 在加载阶段,虚拟机需要完成3个事情1.通过一个类的全限定名获取定义此类的二进制字节流 ...

  4. Centos7安装Redis3.X

    本文只是简单搭建Redis,为了整合ELK用,后面会详细写. Redis:REmote DIctionary Server(远程字典服务器) 是完全开源免费的,用C语言编写的,遵守BSD协议,是一个高 ...

  5. Mysql安装及用简单用法

    Mysql安装和初始化 初见: Mysql软件 - 服务端软件 - 服务端程序 - 解析指令 - 对文件的操作 - 客户端软件 - 客户端程序 - 发送指令(sql语句) - 解析指令 其他类似软件: ...

  6. NBU5240备份系统还原数据库---Windows版

    NBU5240是一个基于系统文件和多种数据库备份的灾备系统,灵活性比较高.下面具体记录如何利用该系统的备份文件进行数据库还原.(基于业务场景) 公司某业务部门突然发现前台系统数据有异常,已经是几天前的 ...

  7. 【每日一包0007】array-range

    [github地址:https://github.com/ABCDdouyae...] array-range 生成一个指定起始位置的固定长度的数组 用法:array-range(start, end ...

  8. 64位 Qt5.12 MySql 连接问题

    关于怎么检查Qt是否带MySql驱动 ,到Qt安装目录下 plugins\sqldrivers下寻找是否有qsqlmysql.dll文件      例如:F:\Qt\Qt5.9.6\5.9.6\msv ...

  9. php curl http digest

    php用curl访问有http digest验证的网址时,不能直接加在URL上,例如: http://user:pass@xxx.xxx.xxx.xxx/index.php?a=1&b=2 这 ...

  10. mysql命令使用3

    算术运算函数 sum()求和 mysql> select sum(price) from books;+------------+| sum(price) |+------------+| 10 ...