React 使用相对于根目录进行引用组件

番茄西红柿发布于2019-08-21 16:55 / 1199人阅读

摘要：在对自己开发的组件中经常会做诸如以下的引用这样使用相对路径引用虽然是比较常见的做法，不过在中大型项目中，引入的组件较多时，写起来也是极其蛋疼的。当然，我们可以通过使用中的配置别名，将某些文件目录配置成固定的引入。

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

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

GPU云服务器云服务器相对于汇编语言程序相对于关于汇编语言程序相对于 react cdn 引用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/88912.html

React 项目结构和组件命名规范

摘要：作为一个库，它没有规定项目的整体结构。位于的组件应命名为。组件根据其与组件或的相对路径进行相应命名。考虑这样一个场景，处于位置的组件会被命名为而不是。 React 作为一个库，它没有规定项目的整体结构。这很好，因为它给了我们自由去尝试不同的方法，并适应更适合我们的方式。另一方面，这可能会给React领域的开发人员带来一些困惑。我将会在本文为大家展示我已经使用过一段时间并且效果不错的方...

jay_tian 2019-08-26 13:58 评论0 收藏0
《慕课React入门》总结

摘要：入门与实战组件虚拟的概念这是性能高效的核心算法为此引入了虚拟的机制。这个过程是自动完成的。实际上是改变了样式文件中类的名称，使其唯一。如果希望使用达到的效果，则需要做件事情服务器支持。 React 入门与实战 react组件虚拟DOM的概念这是React性能高效的核心算法 React为此引入了虚拟DOM（Virtual DOM）的机制。基于React进行开发时所有的DOM构造都是通...

NotFound 2019-08-21 17:01 评论0 收藏0
《慕课React入门》总结

摘要：入门与实战组件虚拟的概念这是性能高效的核心算法为此引入了虚拟的机制。这个过程是自动完成的。实际上是改变了样式文件中类的名称，使其唯一。如果希望使用达到的效果，则需要做件事情服务器支持。 React 入门与实战 react组件虚拟DOM的概念这是React性能高效的核心算法 React为此引入了虚拟DOM（Virtual DOM）的机制。基于React进行开发时所有的DOM构造都是通...

zhigoo 2019-08-30 15:53 评论0 收藏0
响应式 React Native Echarts 组件

摘要：额外的三个参数赋给的参数对象，发生变化后内部会自动调用，实现响应式刷新。利用，实现了通知执行在中，可利用实现的事件向组件的通信。一种在 React Native 中封装的响应式 Echarts 组件，使用与示例请参见：react-native-echarts-demo 近年来，随着移动端对数据可视化的要求越来越高，类似 MPAndroidChart 这样的传统图表库已经不能满足产品...

plokmju88 2019-08-22 18:41 评论0 收藏0
一步一步开发安卓下的react-native应用系列之进阶篇

摘要：首先我们打开命令行，切换到项目根目录下，输入安装完成后，请注意，需要把目录下的所有字体文件拷贝到目录下，如果没有该目录，请自行创建。看过我前面文章的朋友们现在应该能正常运行自己的第一个RN应用了，那都是小儿科，现在我们来做点进阶一点的东西。这篇文章有一些属于干货性的东西，请仔细阅读。特别需要注意我加粗的部分。首先我们来看下js文件结构，在项目初始化成功...

xioqua 2019-06-26 17:14 评论0 收藏0