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 ...
随机推荐
- 2019学军集训记&PKUWC2020游记
题解:https://www.cnblogs.com/gmh77/p/12051260.html 集训(×) 被虐(√) Day1 二段考 Day2 绝对不鸽 没那回事 还在路上 其实就是咕了两天 晚 ...
- jetcache:在Spring Boot中怎么玩?
- .net2.0 Thread 多线程
序言 第1章 线程基础 System.Threading Join C#中的Thread中的ApartmentState几种状态(STA,MTA,Unknown)详解 System.Threadin ...
- C++ -- 类与成员
一.初始化列表 1.是构造函数中一种成员的初始化方式 例如,class 类名 { 类名(参数列表):成员1(成员1),成员2(成员2)... { } } 2.用此方法可以解决类中的成员与 ...
- 【BZOJ3811/UOJ36】 玛里苟斯
Description 魔法之龙玛里苟斯最近在为加基森拍卖师的削弱而感到伤心,于是他想了一道数学题. S 是一个可重集合,S={a1,a2,…,an}. 等概率随机取 S 的一个子集 A={ai1,… ...
- 【Leetcode】二分法
题目: 在排序数组中查找元素的第一个和最后一个位置. 二分法的思想非常简单,然而其中的实现细节非常繁琐,容易出错.本推文非常详细地介绍二分法的实现细节. 总结几点注意事项: 初始上.下界的取值: 判断 ...
- Vue学习(二) :第一个Vue项目
OS: Windows 10 Home 64bit Chocolatey version: 0.10.13 npm version: 6.4.1 yarn version: 1.16.0 git ve ...
- Oracle dba角色和sysdba的区别
如果用户需要远程sysdba的方式登陆,需要grant sysdba权限,登陆后以sys用户执行命令,需要验证密码文件. 密码文件如果是从12c之前的老版本同步过来,需要重建12c格式的密码文件. d ...
- 自动化运维--ansible(2)
问题一:如何在多台服务器中配置Web项目上线的所有环境 解答: 1.使用ansible配置nginx服务 在安装前了解rpm与yum的区别 rpm是压缩包安装依赖包需要自己手动安装,yum安装解决依 ...
- python-又来练习题--输出一个字符串中最长的子字符串及其长度
一.有个字符串 str= '$sd1#111$svda123!!!221&eSSDSyyyyyyDG^svda121^svda124^1111111111111' 包含特殊字符.数字和字母,输 ...