react中文件引入路徑../../優化

你是否為../../../.......index而煩惱呢，這里收集幾種方法供大家參考。

 

一、適用於使用typeScript項目，方法十分簡單

1.找到項目中的tsconfig.json文件

2.在“compilerOptions”對象中添加屬性："baseUrl": "src"//tsconfig.json文件

{
  "compilerOptions": {
     ...
    "baseUrl": "src",
  },
  ...
}    

 

配置了后，我們如果要引入src目錄下的utils目錄下的某個方法(import MD5 from '../../../../utils/md5hash')就可以變成（import MD5 from 'utils/md5hash'）。

 

二、配置webpack

一般的react項目，可以通過配置webpack來優化路徑引入。可以參考官方文檔：https://www.webpackjs.com/configuration/resolve/#resolve-alias

如下：

創建 import 或 require 的別名，來確保模塊引入變得更簡單。例如，一些位於 src/ 文件夾下的常用模塊：

alias: {
  Utilities: path.resolve(__dirname, 'src/utilities/'),
  Templates: path.resolve(__dirname, 'src/templates/')
}

 

現在，替換「在導入時使用相對路徑」這種方式，就像這樣：

import Utility from '../../utilities/utility';

 

你可以這樣使用別名：

import Utility from 'Utilities/utility';

 

也可以在給定對象的鍵后的末尾添加 $，以表示精准匹配：

alias: {
  xyz$: path.resolve(__dirname, 'path/to/file.js')
}

 

這將產生以下結果：

import Test1 from 'xyz'; // 精確匹配，所以 path/to/file.js 被解析和導入
import Test2 from 'xyz/file.js'; // 非精確匹配，觸發普通解析

 

 

 

參考：react文件路徑優化