一、簡(jiǎn)介

• 在 Vue 項(xiàng)目當(dāng)中，可以使用?@?來表示?src/，但在 React 項(xiàng)目中，默認(rèn)卻沒有該功能，因此需要進(jìn)行手動(dòng)的配置來實(shí)現(xiàn)該功能。

  別名主要解決的問題：每個(gè)頁面都使用路徑的方式進(jìn)行引入，這樣很麻煩，效率很低，這個(gè)時(shí)候可以配置一個(gè)別名，來直接使用別名引入。

• 使用 @craco/craco 可以在不釋放 React 隱藏配置（$ npm run eject）的情況下就能配置好別名，參考文章。文章來源地址http://www.zghlxwxcb.cn/news/detail-701924.html

二、js + react 項(xiàng)目

// 第一步：釋放 React 項(xiàng)目的配置文件，如果已經(jīng)釋放，則省略此步
// 注意：這里也可以不用釋放，安裝某些庫(kù)來實(shí)現(xiàn)部分修改配置，看個(gè)人需要
$ npm run eject

// 第二步：找到 webpack.config.js 文件
// 找到 resolve 下的 alias 配置項(xiàng)，添加以下兩行配置：
resolve: {
  // 配置別名
  alias: {
    // 自定義別名
    "@": paths.appSrc,
    "HOOkS": path.resolve(paths.appSrc, "hooks/index"),
    
    // ....其他的一些配置
  }
}

// 第三步：創(chuàng)建相關(guān)測(cè)試文件
// 在 src 目錄下，創(chuàng)建一個(gè) hooks 目錄，里面創(chuàng)建一個(gè) index.js
// index.js 當(dāng)中，分別暴露兩個(gè)函數(shù)：
// export function test1(){ console.log(111); }
// export function test2(){ console.log(222); }

// 第四步：?jiǎn)?dòng)項(xiàng)目并使用
// 以下兩種導(dǎo)入方式都可以成功進(jìn)行導(dǎo)入
import { test1, test2 } from "@/hooks/index";
import { test1, test2 } from "HOOkS";

test1();
test2();

三、ts + react 項(xiàng)目

// 第一步：釋放 React 項(xiàng)目的配置文件，如果已經(jīng)釋放，則省略此步
// 注意：這里也可以不用釋放，安裝某些庫(kù)來實(shí)現(xiàn)部分修改配置，看個(gè)人需要
$ npm run eject

// 第二步：找到 webpack.config.js 文件
// 找到 resolve 下的 alias 配置項(xiàng)，添加以下配置：
resolve: {
  // 配置別名
  alias: {
    // 自定義別名
    "@": paths.appSrc,
    "interface": ["src/interface"],
    "api": path.resolve(paths.appSrc, "api"),
    "utils": path.resolve(paths.appSrc, "utils"),

    // ....其他的一些配置
  }
}

// 第三步：在項(xiàng)目根路徑下創(chuàng)建：paths.json 文件，內(nèi)容如下所示：
// 這里單獨(dú)創(chuàng)建一個(gè) paths.json 文件，是為了跟 tsconfig.json 原始文件區(qū)分開，如果不需要區(qū)分開也可以直接在 tsconfig.json 中進(jìn)行追加。
// baseUrl 設(shè)置為 ./ 也就是設(shè)置為了基于 tsconfig.json 的 ./
// paths當(dāng)中的配置，都是基于baseUrl的
// "api/*": ["src/api/*"]
// 代表遇到 import {} from "api/*" 時(shí)，就從 src/api/* 中引入
// 這里的規(guī)則可以參考 TS 的文檔：https://www.tslang.cn/docs/handbook/module-resolution.html
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "interface": ["src/interface"],
      "api/*": ["src/api/*"],
      "utils/*": ["src/utils/*"]
    }
  }
}

// 第四步：在項(xiàng)目根路徑下的 tsconfig.json 當(dāng)中添加以下代碼：
// 即往 compilerOptions 當(dāng)中添加："extends": "./paths.json"
{
  "compilerOptions": {
    "extends": "./paths.json"
  }
}

// 第五步：創(chuàng)建以下目錄和文件
// src/api/rights.ts
// src/utils/menuUtils.ts
// src/interface/index.ts

// 第六步：使用
// 注意：（getMenuList、filterMenuForRender、menuItemInterface是對(duì)應(yīng)文件當(dāng)中導(dǎo)出的內(nèi)容，這里就是根據(jù)個(gè)人情況進(jìn)行導(dǎo)出）
import { getMenuList } from "api/rights";
import { filterMenuForRender } from "utils/menuUtils";
import { menuItemInterface } from "interface";

到了這里，關(guān)于React 配置別名 @ （ js/ts 項(xiàng)目中通過 webpack.config.js 配置）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！