React 添加引用路徑時如何使用@符號作為src文件
更新時間：2023年06月12日 10:02:47 作者：龜霸也是高達
這篇文章主要介紹了React 添加引用路徑時如何使用@符號作為src文件,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
在react引用組件時,我們經常會遇到下圖的情況
- '…/…/…/'來指代文件所在文件夾的文職
- 這種’…/'很不美觀也很難讀,看著就很復雜,很難讀,不能一眼知道文件所在的位置情況
- 在vue中,我們可以使用@來指代src文件夾
那么在react中,怎么使用@符號指代src文件夾呢?
- 因為我的項目有用到antd,所以直接使用craco來配置
引入craco
$ yarn add @craco/craco
修改package.json文件,將craco作為執(zhí)行文件
/* package.json */
"scripts": {
- "start": "react-scripts start",
- "build": "react-scripts build",
- "test": "react-scripts test",
+ "start": "craco start",
+ "build": "craco build",
+ "test": "craco test",
}配置craco.config.js文件
在項目根目錄創(chuàng)建一個 craco.config.js 用于修改默認配置。
/* craco.config.js */
module.exports = {
// ...
};將js的根路徑和你想要自定義的路徑拼接起來
const path = require("path")//導入path模塊
//定義函數resolve,將你想要自定義的路徑和js的根路勁作拼接
const resolve = dir =>path.resolve(__dirname,dir)在module.exports中添加webpack相關配置
module.exports = {
webpack:{
alias:{
//名稱:路徑
"@":resolve("src")
}
}
};然后就成功了,這樣就不不用使用inject命令也能自定義目錄了
附錄：react項目配置 @ 為src根目錄
前置：
修改jsconfig.json文件
{
? "compilerOptions": {
? ? "jsx": "react",
? ? "experimentalDecorators": true,
? ? "baseUrl": "./",
? ? "paths": {
? ? ? "@/*": [
? ? ? ? "src/*"
? ? ? ]
? ? }
? }
}1. 原生create-react-app 的情況
若已經使用 “npm run eject” 暴露了webpack.config.js文件
修改 config/webpack.config.js 文件配置(找到alias)
const paths = require('./paths');
resolve: {
? ? alias: {
? ? ? ? '@': paths.appSrc
? ? },
}2.未暴露webpack.config.js配置文件的情況(請參考文章開頭介紹)
到此這篇關于React 添加引用路徑時如何使用@符號作為src文件的文章就介紹到這了,更多相關React使用@符號作為src文件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
react中使用echarts,并實現tooltip循環(huán)輪播方式
這篇文章主要介紹了react中使用echarts,并實現tooltip循環(huán)輪播方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了React自定義視頻全屏按鈕實現全屏功能，通過繪制全屏按鈕，并綁定點擊事件，編寫點擊事件，通過實例代碼給大家詳細講解,需要的朋友可以參考下2022-11-11
這篇文章主要為大家介紹了React18之update流程從零實現詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
this在javascript中已經相當靈活，這篇文章主要介紹了React.js綁定this的5種方法(小結)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
React在弱網環(huán)境下限制按鈕多次點擊,防止重復提交問題
這篇文章主要介紹了React在弱網環(huán)境下限制按鈕多次點擊,防止重復提交問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
這篇文章主要介紹了詳解React之key的使用和實踐，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
在做項目的時候,甲方給的信息有限,網頁的備案信息寫成固定的,之后驗收的時候,甲方要求把這個備案信息寫成動態(tài)的,可以自增減,下面通過實例代碼給大家介紹react實現動態(tài)增減表單項的示例,感興趣的朋友跟隨小編一起看看吧2024-05-05
這篇文章主要介紹了React組件渲染后對DOM的操作方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
這篇文章主要介紹了React從命令式編程到聲明式編程,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了react ant protable自定義實現搜索下拉框，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06