react如何快速設(shè)置文件路徑別名

更新時間：2021年04月28日 11:40:40 作者：vagrant..

React是用于構(gòu)建用戶界面的JavaScript庫，起源于Facebook的內(nèi)部項目，這篇文章主要介紹了react如何快速設(shè)置文件路徑別名,需要的朋友可以參考下

React是用于構(gòu)建用戶界面的JavaScript庫，起源于Facebook的內(nèi)部項目，因為該公司對市場上所有 JavaScript MVC框架，都不滿意，就決定自己寫一套，用來架設(shè)Instagram的網(wǎng)站。做出來以后，發(fā)現(xiàn)這套東西很好用，就在2013年5月開源了。

React 是一個用于構(gòu)建用戶界面的 JAVASCRIPT 庫。

React 主要用于構(gòu)建UI，很多人認(rèn)為 React 是 MVC 中的 V（視圖）。

React 起源于 Facebook 的內(nèi)部項目，用來架設(shè) Instagram 的網(wǎng)站，并于 2013 年 5 月開源。

React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關(guān)注和使用它。

由于webpack隱藏了配置文件需要先暴露出來，進(jìn)入項目目錄后在cmd中運行以下代碼

npm run eject

你確定要退出嗎？這種行為是永久的。
輸入y 然后回車
運行結(jié)束后在項目文件夾中找到config文件夾

打開webpack.config.js

按下 Ctrl+f 查找 alias 找到配置項

配置一下映射，可以參照以下我的配置

alias: {
        "react-native": "react-native-web",
        ...(isEnvProductionProfile && {
          "react-dom$": "react-dom/profiling",
          "scheduler/tracing": "scheduler/tracing-profiling",
        }),
        ...(modules.webpackAliases || {}),
        // 配置文件別名,左邊是別名右邊是對應(yīng)的路徑
        "@": path.resolve(__dirname, "../src"),
        "@scss": path.resolve(__dirname, "../src/assets/scss"),
        "@images": path.resolve(__dirname, "../src/assets/images"),
        "@views": path.resolve(__dirname, "../src/views"),
        "@components": path.resolve(__dirname, "../src/components"),
      },

配置完成后重新啟動一下項目就行了

到此這篇關(guān)于react如何快速設(shè)置文件路徑別名的文章就介紹到這了,更多相關(guān)react文件路徑別名內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

React使用Mobx6.x共享狀態(tài)問題
這篇文章主要介紹了React使用Mobx6.x共享狀態(tài)問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
React中useState的使用方法及注意事項
useState通過在函數(shù)組件里調(diào)用它來給組件添加一些內(nèi)部state,下面這篇文章主要給大家介紹了關(guān)于React中useState的使用方法及注意事項的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
詳解React 16 中的異常處理
這篇文章主要介紹了詳解React 16 中的異常處理的相關(guān)資料,React 16.x 版本中，引入了所謂 Error Boundary 的概念，從而保證了發(fā)生在 UI 層的錯誤不會連鎖導(dǎo)致整個應(yīng)用程序崩潰；未被任何異常邊界捕獲的異?？赡軙?dǎo)致整個 React 組件樹被卸載，需要的朋友可以參考下
2017-07-07
React實現(xiàn)控制減少useContext導(dǎo)致非必要的渲染詳解
這篇文章主要介紹了React如何有效減少使用useContext導(dǎo)致的不必要渲染,使用useContext在改變一個數(shù)據(jù)時，是通過自己逐級查找對比改變的數(shù)據(jù)然后渲染，本文通過示例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-11-11
30行代碼實現(xiàn)React雙向綁定hook的示例代碼
本文主要介紹了30行代碼實現(xiàn)React雙向綁定hook的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
使用react-dnd編寫一個可拖拽排列的list
這篇文章主要為大家詳細(xì)介紹了如何使用react-dnd編寫一個可拖拽排列的list,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-03-03
教你在react中創(chuàng)建自定義hooks
簡單來說就是使用自定義hook可以將某些組件邏輯提取到可重用的函數(shù)中。自定義hook是一個從use開始的調(diào)用其他hook的Javascript函數(shù)，下面看下react中創(chuàng)建自定義hooks的相關(guān)知識，感興趣的朋友一起看看吧
2021-11-11
React中的Diff算法你了解嗎
這篇文章主要為大家詳細(xì)介紹了React的Diff算法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
2022-03-03
一百多行代碼實現(xiàn)react拖拽hooks
這篇文章主要介紹了一百多行代碼實現(xiàn)react拖拽hooks，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
React組件的生命周期詳細(xì)描述
本篇文章主要介紹了React組件生命周期，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2021-10-10