React中用@符號編寫文件路徑實現(xiàn)方法介紹
更新時間：2022年09月29日 11:03:55 作者：月光曬了很涼快
在Vue中，我們導入文件時，文件路徑中可以使用@符號指代src目錄，極大的簡化了我們對路徑的書寫。但是react中，要想實現(xiàn)這種方式書寫文件路徑，需要寫配置文件來實現(xiàn)
前言
無論是vue還是react開發(fā)，我們通常需要引入路徑的便捷化配置，通常我們都會約定使用路徑@作為根路徑地址。如果是個人react開發(fā)的@路徑簡單配置
安裝craco
yarn add @craco/craco
根路徑下創(chuàng)建 craco.config.js
const path = require("path")
module.exports = {
webpack:{
alias:{
"@":path.resolve(__dirname,"src")
}
}
}寫文件路徑
在 config-overrides.js 文件中書寫如下代碼：
// 增量配置當前項目中的webpack配置，建議在react18中不要用
// 建議在react18中也不要用裝飾器
// override 方法，如果webpack中有此配置則，覆蓋，如果沒有則添加
const path = require('path')
const { override, addWebpackAlias } = require('customize-cra')
// 方案2：自定義
const customConfig = () => config => {
config.resolve.alias['@'] = path.resolve('src')
return config
}
module.exports = override(
// 方案1：使用webpack內置方法
// addWebpackAlias({
// '@': path.resolve('src')
// }),
customConfig()
)上面的兩種方案，任選一種即可完成配置，此時我們已經(jīng)能夠實現(xiàn)用@符指代src目錄的功能了。
此時我們寫這樣的代碼是不會報錯的：
// import countAction from '../../store/actionCreators/countAction' import countAction from '@/store/actionCreators/countAction'
但是在書寫時，并不會觸發(fā)編輯器的提示，沒有提示寫起來很痛苦，所以我們還需要再寫一個配置文件，用作觸發(fā)書寫帶有@符的文件路徑時，編輯器的自動提示功能。
我們需要新建一個 jsconfig.json 文件，在該文件中書寫如下代碼：
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
}
}
溫馨提示：在 react 項目中，修改配置文件后需要重啟項目。
至此，我們就可以愉快地書寫代碼了。
到此這篇關于React中用@符號編寫文件路徑實現(xiàn)方法介紹的文章就介紹到這了,更多相關React @內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本文主要介紹了react中antd Upload手動上傳的示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
react用Redux中央倉庫實現(xiàn)一個todolist
這篇文章主要為大家詳細介紹了react用Redux中央倉庫實現(xiàn)一個todolist，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-09-09
這篇文章主要為大家介紹了concent漸進式重構react應用的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
本文主要介紹了React 實現(xiàn)井字棋,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-07-07
這篇文章主要為大家詳細介紹了React實現(xiàn)動態(tài)調用的彈框組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
這篇文章主要介紹了原生+React實現(xiàn)懶加載(無限滾動)列表方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
本文主要介紹了React中setState同步異步場景的使用，文中根據(jù)實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
采用React編寫小程序的Remax框架的編譯流程解析(推薦)
這篇文章主要介紹了采用React編寫小程序的Remax框架的編譯流程解析(推薦),本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-04-04
本文通過實例給大家分享了編寫React組件項目實踐的全過程，對此有興趣的朋友可以參考下。2018-03-03
本篇文章主要介紹了React Native日期時間選擇組件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04