日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

React中用@符號編寫文件路徑實現方法介紹_React

作者：月光曬了很涼快 ? 更新時間： 2022-11-18 編程語言

前言

無論是vue還是react開發，我們通常需要引入路徑的便捷化配置，通常我們都會約定使用路徑@作為根路徑地址。如果是個人react開發的@路徑簡單配置

安裝craco

yarn add @craco/craco

根路徑下創建 craco.config.js

const path = require("path")
module.exports = {
  webpack:{
    alias:{
      "@":path.resolve(__dirname,"src")
    }
  }
}

寫文件路徑

在 config-overrides.js 文件中書寫如下代碼：

// 增量配置當前項目中的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內置方法 
    // addWebpackAlias({
    //   '@': path.resolve('src')
    // }),
    customConfig()
)

上面的兩種方案，任選一種即可完成配置，此時我們已經能夠實現用@符指代src目錄的功能了。

此時我們寫這樣的代碼是不會報錯的：

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

但是在書寫時，并不會觸發編輯器的提示，沒有提示寫起來很痛苦，所以我們還需要再寫一個配置文件，用作觸發書寫帶有@符的文件路徑時，編輯器的自動提示功能。

我們需要新建一個 jsconfig.json 文件，在該文件中書寫如下代碼：

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

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

至此，我們就可以愉快地書寫代碼了。

原文鏈接：https://blog.csdn.net/weixin_45605541/article/details/127062522

欄目分類
最近更新