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