React 使用相對于根目錄進行引用組件

番茄西紅柿發布于2019-08-21 16:55 / 1200人閱讀

摘要：在對自己開發的組件中經常會做諸如以下的引用這樣使用相對路徑引用雖然是比較常見的做法，不過在中大型項目中，引入的組件較多時，寫起來也是極其蛋疼的。當然，我們可以通過使用中的配置別名，將某些文件目錄配置成固定的引入。

在對自己開發的組件中經常會做諸如以下的引用：

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 引用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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