React中用@符號(hào)編寫文件路徑實(shí)現(xiàn)方法介紹
前言
無論是vue還是react開發(fā)，我們通常需要引入路徑的便捷化配置，通常我們都會(huì)約定使用路徑@作為根路徑地址。如果是個(gè)人react開發(fā)的@路徑簡(jiǎn)單配置
安裝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 文件中書寫如下代碼：
// 增量配置當(dāng)前項(xiàng)目中的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內(nèi)置方法
// addWebpackAlias({
// '@': path.resolve('src')
// }),
customConfig()
)上面的兩種方案，任選一種即可完成配置，此時(shí)我們已經(jīng)能夠?qū)崿F(xiàn)用@符指代src目錄的功能了。
此時(shí)我們寫這樣的代碼是不會(huì)報(bào)錯(cuò)的：
// import countAction from '../../store/actionCreators/countAction' import countAction from '@/store/actionCreators/countAction'
但是在書寫時(shí)，并不會(huì)觸發(fā)編輯器的提示，沒有提示寫起來很痛苦，所以我們還需要再寫一個(gè)配置文件，用作觸發(fā)書寫帶有@符的文件路徑時(shí)，編輯器的自動(dòng)提示功能。
我們需要新建一個(gè) jsconfig.json 文件，在該文件中書寫如下代碼：
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
}
}
溫馨提示：在 react 項(xiàng)目中，修改配置文件后需要重啟項(xiàng)目。
至此，我們就可以愉快地書寫代碼了。
到此這篇關(guān)于React中用@符號(hào)編寫文件路徑實(shí)現(xiàn)方法介紹的文章就介紹到這了,更多相關(guān)React @內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了ReactJs設(shè)置css樣式的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06
react搭建環(huán)境時(shí)執(zhí)行npm start報(bào)錯(cuò)start: 'react-scripts&
這篇文章主要介紹了react搭建環(huán)境時(shí)執(zhí)行npm start報(bào)錯(cuò)start: 'react-scripts start'的解決方案,具有很好的參考價(jià)值,希望杜對(duì)大家有所幫助,2023-10-10
React?less?實(shí)現(xiàn)縱橫柱狀圖示例詳解
這篇文章主要介紹了React?less?實(shí)現(xiàn)縱橫柱狀圖示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
React渲染機(jī)制及相關(guān)優(yōu)化方案
這篇文章主要介紹了react中的渲染機(jī)制以及相關(guān)的優(yōu)化方案，內(nèi)容包括react渲染步驟、concurrent機(jī)制以及產(chǎn)生作用的機(jī)會(huì)，簡(jiǎn)單模擬實(shí)現(xiàn) concurrent mode，基于作業(yè)調(diào)度優(yōu)先級(jí)的思路進(jìn)行項(xiàng)目?jī)?yōu)化的兩個(gè)hooks，感興趣的小伙伴跟著小編一起來看看吧2023-07-07
react-three-fiber實(shí)現(xiàn)炫酷3D粒子效果首頁(yè)
這篇文章主要介紹了react-three-fiber實(shí)現(xiàn)3D粒子效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
每天學(xué)習(xí)一個(gè)hooks?useMount
這篇文章主要為大家介紹了每天學(xué)習(xí)一個(gè)hooks?useMount，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要為大家介紹了react+antd+upload結(jié)合使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
在TypeScript (TSX) 中編寫 CSS 樣式類有幾種方法,包括使用純 CSS、CSS Modules、Styled Components 等,本文給大家介紹了幾種常見方法的示例,通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-07-07
ReactNative支付密碼輸入框?qū)崿F(xiàn)詳解
這篇文章主要為大家介紹了ReactNative支付密碼輸入框?qū)崿F(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
React實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果(樓梯效果)
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)二級(jí)聯(lián)動(dòng)效果，樓梯效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09