快捷導(dǎo)航

React 添加引用路徑時(shí)如何使用@符號(hào)作為src文件

更新時(shí)間：2023年06月12日 10:02:47 作者：龜霸也是高達(dá)

這篇文章主要介紹了React 添加引用路徑時(shí)如何使用@符號(hào)作為src文件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

在react引用組件時(shí),我們經(jīng)常會(huì)遇到下圖的情況
那么在react中,怎么使用@符號(hào)指代src文件夾呢?
引入craco
修改package.json文件,將craco作為執(zhí)行文件
配置craco.config.js文件
將js的根路徑和你想要自定義的路徑拼接起來
在module.exports中添加webpack相關(guān)配置
附錄：react項(xiàng)目配置 @ 為src根目錄

在react引用組件時(shí),我們經(jīng)常會(huì)遇到下圖的情況

在這里插入圖片描述

'…/…/…/'來指代文件所在文件夾的文職
這種’…/'很不美觀也很難讀,看著就很復(fù)雜,很難讀,不能一眼知道文件所在的位置情況
在vue中,我們可以使用@來指代src文件夾

那么在react中,怎么使用@符號(hào)指代src文件夾呢?

因?yàn)槲业捻?xiàng)目有用到antd,所以直接使用craco來配置

引入craco

$ yarn add @craco/craco

修改package.json文件,將craco作為執(zhí)行文件

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

配置craco.config.js文件

在項(xiàng)目根目錄創(chuàng)建一個(gè) craco.config.js 用于修改默認(rèn)配置。

/* craco.config.js */
module.exports = {
  // ...
};

將js的根路徑和你想要自定義的路徑拼接起來

const path = require("path")//導(dǎo)入path模塊
//定義函數(shù)resolve,將你想要自定義的路徑和js的根路勁作拼接
const resolve = dir =>path.resolve(__dirname,dir)

在module.exports中添加webpack相關(guān)配置

module.exports = {
  webpack:{
    alias:{
    //名稱:路徑
      "@":resolve("src")
    }
  }
};

然后就成功了,這樣就不不用使用inject命令也能自定義目錄了

附錄：react項(xiàng)目配置 @ 為src根目錄

前置：

修改jsconfig.json文件

{
? "compilerOptions": {
? ? "jsx": "react",
? ? "experimentalDecorators": true,
? ? "baseUrl": "./",
? ? "paths": {
? ? ? "@/*": [
? ? ? ? "src/*"
? ? ? ]
? ? }
? }
}

1. 原生create-react-app 的情況

若已經(jīng)使用 “npm run eject” 暴露了webpack.config.js文件

修改 config/webpack.config.js 文件配置(找到alias)

const paths = require('./paths');
resolve: {
? ? alias: {
? ? ? ? '@': paths.appSrc
? ? },
}

2.未暴露webpack.config.js配置文件的情況(請(qǐng)參考文章開頭介紹)

到此這篇關(guān)于React 添加引用路徑時(shí)如何使用@符號(hào)作為src文件的文章就介紹到這了,更多相關(guān)React使用@符號(hào)作為src文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: