React 添加引用路徑時(shí)如何使用@符號作為src文件
更新時(shí)間：2023年06月12日 10:02:47 作者：龜霸也是高達(dá)
這篇文章主要介紹了React 添加引用路徑時(shí)如何使用@符號作為src文件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
在react引用組件時(shí),我們經(jīng)常會遇到下圖的情況
- '…/…/…/'來指代文件所在文件夾的文職
- 這種’…/'很不美觀也很難讀,看著就很復(fù)雜,很難讀,不能一眼知道文件所在的位置情況
- 在vue中,我們可以使用@來指代src文件夾
那么在react中,怎么使用@符號指代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)建一個 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配置文件的情況(請參考文章開頭介紹)
到此這篇關(guān)于React 添加引用路徑時(shí)如何使用@符號作為src文件的文章就介紹到這了,更多相關(guān)React使用@符號作為src文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
react清空ant.design中表單內(nèi)容的方法實(shí)現(xiàn)
本文主要介紹了react清空ant.design中表單內(nèi)容的方法實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-12-12
這篇文章主要給大家介紹了關(guān)于React組件重構(gòu)之嵌套+繼承及高階組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-07-07
這篇文章主要介紹了React拆分窗格組件的兩種方法,使用第三方庫react-split-pane適用于快速實(shí)現(xiàn)拆分窗格功能，并且對功能和樣式的要求較為簡單的場景，本文結(jié)合示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-07-07
Express+React+Antd實(shí)現(xiàn)上傳功能(前端和后端)
這篇文章主要介紹了Express+React+Antd實(shí)現(xiàn)上傳功能(前端和后端),本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
React性能優(yōu)化實(shí)現(xiàn)圖片懶加載
本文深入探討了圖片懶加載在現(xiàn)代Web應(yīng)用開發(fā)中的重要性及其實(shí)現(xiàn)方案,從原生HTML屬性、傳統(tǒng)Scroll事件監(jiān)聽到IntersectionObserver?API,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-02-02
react自動化構(gòu)建路由的實(shí)現(xiàn)
這篇文章主要介紹了react自動化構(gòu)建路由的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
可定制react18 input otp 一次性密碼輸入組件
這篇文章主要為大家介紹了可定制react18 input otp 一次性密碼輸入組件，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要為大家介紹了一文學(xué)會Remix寫API接口實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
React實(shí)現(xiàn)簡單登錄的項(xiàng)目實(shí)踐
登錄、注冊、找回密碼是前端項(xiàng)目經(jīng)常遇到的需求,本文主要介紹了React實(shí)現(xiàn)簡單登錄的項(xiàng)目實(shí)踐,具有一定的參考價(jià)值,感興趣的可以了解一下2024-01-01
解決React報(bào)錯`value` prop on `input` should&
這篇文章主要為大家介紹了React報(bào)錯`value` prop on `input` should not be null解決方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12