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';
React 使用相对于根目录进行引用组件的更多相关文章
- 基于React Native的Material Design风格的组件库 MRN
基于React Native的Material Design风格的组件库.(为了平台统一体验,目前只打算支持安卓) 官方网站 http://mrn.js.org/ Github https://git ...
- react初探(二)之父子组件通信、封装公共组件
一.前言 在组件方面react和Vue一样的,核心思想玩的就是组件,下面举两个组件常用的情景. 场景一:假如我们现在有一个页面包含表格以及多个弹框,这种时候如果将这个页面的业务代码写在一个组件中,那么 ...
- react系列(二)高阶组件-HOC
高阶组件 简单来说,高阶组件可以看做一个函数,且该函数接受一个组件作为参数,并返回一个新的组件. 我在之前的博客<闭包和类>中提到一个观点,面向对象的好处就在于,易于理解,方便维护和复用. ...
- React躬行记(3)——组件
组件(Component)由若干个React元素组成,包含属性.状态和生命周期等部分,满足独立.可复用.高内聚和低耦合等设计原则,每个React应用程序都是由一个个的组件搭建而成,即组成React应用 ...
- React 以两种形式去创建组件 类或者函数(二)
08==>创建组件以 1类的形式 或者以 2函数的形式 09==>使用组件 在src下创建components文件夹 是放组件的 CompType.js 组件 组件开头大写(重要) Com ...
- [RN] React Native 好用的时间线 组件
React Native 好用的时间线 组件 效果如下: 实现方法: 一.组件封装 CustomTimeLine.js "use strict"; import React, {C ...
- react第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性)
第十二单元(react路由-使用react-router-dom-认识相关的组件以及组件属性) #课程目标 理解路由的原理及应运 理解react-router-dom以及内置的一些组件 合理应用内置组 ...
- React 三大属性state,props,refs以及组件嵌套的应用
React 三大属性state,props,refs以及组件嵌套的应用 该项目实现了一个简单的表单输入添加列表的内容 代码如下 <!DOCTYPE html> <html> & ...
- 第七十七篇:ref引用(在vue中引用组件实例)
好家伙, 为方便理解, 我们先来写一个经典自增一按钮, 再加上一个count清零按钮, Left.vue组件中: <template> <div > <h1>我是L ...
随机推荐
- wed.xml 中 filter、servlet 配置格式
1.wed.xml 中 filter 配置格式 <filter> <filter-name>filterName</filter-name> <filter- ...
- 消息队列之--Kafak
序言 消息丢失如何解决? 解耦 异步 并行 Docker安装Kafak 1.下载镜像 # zookeeper镜像 docker pull wurstmeister/zookeeper # kafka镜 ...
- [jvm学习笔记]-类加载过程
JVM类加载的过程 加载=>验证=>准备=>解析=>初始化 5个阶段所执行的具体动作 加载 在加载阶段,虚拟机需要完成3个事情1.通过一个类的全限定名获取定义此类的二进制字节流 ...
- Centos7安装Redis3.X
本文只是简单搭建Redis,为了整合ELK用,后面会详细写. Redis:REmote DIctionary Server(远程字典服务器) 是完全开源免费的,用C语言编写的,遵守BSD协议,是一个高 ...
- Mysql安装及用简单用法
Mysql安装和初始化 初见: Mysql软件 - 服务端软件 - 服务端程序 - 解析指令 - 对文件的操作 - 客户端软件 - 客户端程序 - 发送指令(sql语句) - 解析指令 其他类似软件: ...
- NBU5240备份系统还原数据库---Windows版
NBU5240是一个基于系统文件和多种数据库备份的灾备系统,灵活性比较高.下面具体记录如何利用该系统的备份文件进行数据库还原.(基于业务场景) 公司某业务部门突然发现前台系统数据有异常,已经是几天前的 ...
- 【每日一包0007】array-range
[github地址:https://github.com/ABCDdouyae...] array-range 生成一个指定起始位置的固定长度的数组 用法:array-range(start, end ...
- 64位 Qt5.12 MySql 连接问题
关于怎么检查Qt是否带MySql驱动 ,到Qt安装目录下 plugins\sqldrivers下寻找是否有qsqlmysql.dll文件 例如:F:\Qt\Qt5.9.6\5.9.6\msv ...
- php curl http digest
php用curl访问有http digest验证的网址时,不能直接加在URL上,例如: http://user:pass@xxx.xxx.xxx.xxx/index.php?a=1&b=2 这 ...
- mysql命令使用3
算术运算函数 sum()求和 mysql> select sum(price) from books;+------------+| sum(price) |+------------+| 10 ...