React如何配置src根目錄@
更新時間：2024年01月19日 09:31:49 作者：頑皮寶
這篇文章主要介紹了React如何配置src根目錄@,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
React如何配置src根目錄@
1.打開webpack配置文件
yarn eject or npm run eject
如果報錯了記得提前 git commit一下
2.配置webpack
找到 webpack.config.js 文件在 webpack.config.js 文件中找到 alias 配置在alias里添加'@': path.resolve('src') , 或者 '@': path.join(__dirname,'../src'),
重新npm start即可
React 項目中配置 `@` 符號來代替 `src` 目錄
1. 主要是修改兩個配置文件：craco.config.js 和 tsconfig.json。
// craco.config.js
const path = require("path");
//定義函數(shù)resolve,將你想要自定義的路徑和js的根路勁作拼接
const resolve = (dir) => path.resolve(__dirname, dir);
module.exports = {
webpack: {
alias: {
//名稱:路徑
"@": resolve("src")
}
}
}
// tsconfig.json 用來解決 TS 找不到類型定義的報錯（JS 用戶請?zhí)^）
{
"compilerOptions": {
"paths": {
"@/*": ["src/*"]
}
}
}2. 主要是為了解決../../這種引入路徑，一個是避免文件層級過深，太多../../不雅觀且容易出錯，一個是如果調(diào)整文件目錄，涉及到層級變化時，平白增加多余工作量。
到此這篇關(guān)于React如何配置src根目錄@的文章就介紹到這了,更多相關(guān)React配置src根目錄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
React Hooks 實現(xiàn)和由來以及解決的問題詳解
這篇文章主要介紹了React Hooks 實現(xiàn)和由來以及解決的問題詳解，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
react.js 父子組件數(shù)據(jù)綁定實時通訊的示例代碼
本篇文章主要介紹了react.js 父子組件數(shù)據(jù)綁定實時通訊的示例代碼，2017-09-09
詳解react-router 4.0 下服務(wù)器如何配合BrowserRouter
這篇文章主要介紹了詳解react-router 4.0 下服務(wù)器如何配合BrowserRouter，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
React實現(xiàn)歌詞滾動效果(跟隨音樂播放時間滾動)
這篇文章主要為大家詳細介紹了React實現(xiàn)歌詞滾動效果(跟隨音樂播放使勁按滾動),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2024-02-02
React高階組件優(yōu)化文件結(jié)構(gòu)流程詳解
高階組件就是接受一個組件作為參數(shù)并返回一個新組件（功能增強的組件）的函數(shù)。這里需要注意高階組件是一個函數(shù)，并不是組件，這一點一定要注意，本文給大家分享React 高階組件HOC使用小結(jié)，一起看看吧2023-01-01
這篇文章主要介紹了React在定時器中無法獲取狀態(tài)最新值的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
本文主要介紹了說說react中引入css的方式有哪些并區(qū)別在哪，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
在這篇文章中,我將帶著大家一起探究React中使用dnd-kit實現(xiàn)拖曳排序功能,由于前陣子需要在開發(fā) Picals 的時候,需要實現(xiàn)一些拖動排序的功能,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2024-06-06
React-Markdown 是一個基于 React 的 Markdown 渲染組件庫,其核心設(shè)計理念是通過 Unified 生態(tài)系統(tǒng)實現(xiàn)安全、可擴展的 Markdown 解析2025-04-04
React二維數(shù)組聲明需注意結(jié)構(gòu)與值的可變性,正確方法包括直接賦值或動態(tài)初始化,避免使用const map=[[]]導(dǎo)致長度固定,動態(tài)擴展時應(yīng)先定義一維數(shù)組再添加元素,確保數(shù)組大小可變2025-07-07