置別名路徑

以create-react-app創(chuàng)建的React項目為例，帶領(lǐng)大家配置@路徑別名。

本節(jié)目標: 能夠配置@路徑簡化路徑處理

自定義 CRA 的默認配置

craco 配置文檔

CRA 將所有工程化配置，都隱藏在了 react-scripts 包中，所以項目中看不到任何配置信息

如果要修改 CRA 的默認配置，有以下幾種方案：

• 通過第三方庫來修改，比如，@craco/craco （推薦）
• 通過執(zhí)行 yarn eject 命令，釋放 react-scripts 中的所有配置到項目中

實現(xiàn)步驟

• 安裝修改 CRA 配置的包：yarn add -D @craco/craco
• 在項目根目錄中創(chuàng)建 craco 的配置文件：craco.config.js，并在配置文件中配置路徑別名
• 修改 package.json 中的腳本命令
• 在代碼中，就可以通過 @ 來表示 src 目錄的絕對路徑
• 重啟項目，讓配置生效

代碼實現(xiàn)

craco.config.js

const path = require('path')
module.exports = {
  // webpack 配置
  webpack: {
    // 配置別名
    alias: {
      // 約定：使用 @ 表示 src 文件所在路徑
      '@': path.resolve(__dirname, 'src')
    }
  }
}

package.json

// 將 start/build/test 三個命令修改為 craco 方式
"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

路徑別名智能提示方案

在配置好別名路徑之后，我們可以使用@符號代替*/src路徑，但是我們發(fā)現(xiàn)此時并不好用。

代碼只能引入還是自動引入../路徑，手動輸入@符號時，也沒有路徑提示。

遇到這個問題，我們有兩種非常簡單的解決方案

方案一：path-alias插件

VsCode的插件生態(tài)不可謂不豐富，工欲善其事，必先利其器！我們前往VsCode的插件市場，搜索并下載path-alias插件,這個插件能幫我們做到@符號路徑別名的智能提示。

未安裝效果：未安裝效果與上圖中一樣，不能智能導(dǎo)入，甚至手動導(dǎo)入時都無法顯示路徑。

安裝后不光具備路徑別名智能提示，還可以點擊別名路徑跳轉(zhuǎn)到該文件

選擇性配置：

path-alias插件只默認配置路徑@映射到項目的src目錄，如果需要配置其他的路徑別名的智能提示的話，需要進入VsCode的setting.json文件中，添加：

// 開發(fā)項目時使用路徑別名時會有"智能提示" 
"pathAlias.aliasMap": {
  // key是你要定義的別名 | 使用${cwd}來代替當(dāng)前工作目錄的絕對路徑
  "@": "${cwd}/src",
  "~": "${cwd}/src",
  "components": "${cwd}/src/components"
},

此時，輸入component也有會智能提示了

使用path-alias插件缺點：該插件占用內(nèi)存較大，如果內(nèi)存吃緊的話，可以使用方案二來解決智能路徑提示的問題。

方案二：jsconfig.json文件

• 在你的項目根目錄下新建: jsconfig.ison文件
• 內(nèi)存小時使用，復(fù)制如下到你的文件，重啟vscode即可

{
  "compilerOptions": {
    "experimentalDecorators": true, 
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"],
      "components/*": ["src/components/*"],
      "assets/*": ["src/assets/*"],
      "views/*": ["src/views/*"],
      "common/*": ["src/common/*"],
    }
  },
  "exclude": ["node_modules", "dist"]
}

總結(jié)一下

如果想一次配置且不在乎占用內(nèi)存情況，建議直接使用path-alias插件

如果本機內(nèi)存不夠或覺得這個插件使用體驗不佳, 建議使用 jsconfig.json

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論