React中用@符號(hào)編寫(xiě)文件路徑實(shí)現(xiàn)方法介紹

更新時(shí)間：2022年09月29日 11:03:55 作者：月光曬了很涼快

在Vue中，我們導(dǎo)入文件時(shí)，文件路徑中可以使用@符號(hào)指代src目錄，極大的簡(jiǎn)化了我們對(duì)路徑的書(shū)寫(xiě)。但是react中，要想實(shí)現(xiàn)這種方式書(shū)寫(xiě)文件路徑，需要寫(xiě)配置文件來(lái)實(shí)現(xiàn)

前言

無(wú)論是vue還是react開(kāi)發(fā)，我們通常需要引入路徑的便捷化配置，通常我們都會(huì)約定使用路徑@作為根路徑地址。如果是個(gè)人react開(kāi)發(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")
    }
  }
}

寫(xiě)文件路徑

在 config-overrides.js 文件中書(shū)寫(xiě)如下代碼：

// 增量配置當(dāng)前項(xiàng)目中的webpack配置，建議在react18中不要用
// 建議在react18中也不要用裝飾器
// override 方法，如果webpack中有此配置則，覆蓋，如果沒(méi)有則添加
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í)我們寫(xiě)這樣的代碼是不會(huì)報(bào)錯(cuò)的：

// import countAction from '../../store/actionCreators/countAction'
import countAction from '@/store/actionCreators/countAction'

但是在書(shū)寫(xiě)時(shí)，并不會(huì)觸發(fā)編輯器的提示，沒(méi)有提示寫(xiě)起來(lái)很痛苦，所以我們還需要再寫(xiě)一個(gè)配置文件，用作觸發(fā)書(shū)寫(xiě)帶有@符的文件路徑時(shí)，編輯器的自動(dòng)提示功能。

我們需要新建一個(gè) jsconfig.json 文件，在該文件中書(shū)寫(xiě)如下代碼：

{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

溫馨提示：在 react 項(xiàng)目中，修改配置文件后需要重啟項(xiàng)目。

至此，我們就可以愉快地書(shū)寫(xiě)代碼了。

到此這篇關(guān)于React中用@符號(hào)編寫(xiě)文件路徑實(shí)現(xiàn)方法介紹的文章就介紹到這了,更多相關(guān)React @內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

react中antd Upload手動(dòng)上傳的示例
本文主要介紹了react中antd Upload手動(dòng)上傳的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-04-04
react用Redux中央倉(cāng)庫(kù)實(shí)現(xiàn)一個(gè)todolist
這篇文章主要為大家詳細(xì)介紹了react用Redux中央倉(cāng)庫(kù)實(shí)現(xiàn)一個(gè)todolist，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-09-09
concent漸進(jìn)式重構(gòu)react應(yīng)用使用詳解
這篇文章主要為大家介紹了concent漸進(jìn)式重構(gòu)react應(yīng)用的使用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-11-11
React 實(shí)現(xiàn)井字棋的示例代碼
本文主要介紹了React 實(shí)現(xiàn)井字棋,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2024-07-07
React實(shí)現(xiàn)動(dòng)態(tài)調(diào)用的彈框組件
這篇文章主要為大家詳細(xì)介紹了React實(shí)現(xiàn)動(dòng)態(tài)調(diào)用的彈框組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-08-08
原生+React實(shí)現(xiàn)懶加載(無(wú)限滾動(dòng))列表方式
這篇文章主要介紹了原生+React實(shí)現(xiàn)懶加載(無(wú)限滾動(dòng))列表方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
React中setState同步異步場(chǎng)景的使用
本文主要介紹了React中setState同步異步場(chǎng)景的使用，文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
采用React編寫(xiě)小程序的Remax框架的編譯流程解析(推薦)
這篇文章主要介紹了采用React編寫(xiě)小程序的Remax框架的編譯流程解析(推薦),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-04-04
編寫(xiě)React組件項(xiàng)目實(shí)踐分析
本文通過(guò)實(shí)例給大家分享了編寫(xiě)React組件項(xiàng)目實(shí)踐的全過(guò)程，對(duì)此有興趣的朋友可以參考下。
2018-03-03
React Native日期時(shí)間選擇組件的示例代碼
本篇文章主要介紹了React Native日期時(shí)間選擇組件的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-04-04