在 react-typescript 庫中考慮多個對等依賴版本

Question

我正在將我的反應組件庫react-esri-leaflet轉換為 typescript。 該庫要求用戶安裝 react-leaflet 作為 peerDependency，它提供對 react-leaflet 版本 3 (RLV3) 和 react-leaflet 版本 2 (RLV2) 的支持。 對於默認組件，我可以簡單地做

import { createLayerComponent } from 'react-leaflet'

但是如果用戶想要使用與 RLV2 兼容的組件，他們可以單獨導入這些組件（請隨意查看庫文檔以了解如何使用）。 大多數 RLV2 組件都以類似的開頭

import { withLeaflet, MapControl } from 'react-leaflet'

在轉換為 typescript 時，這會引發錯誤。 在開發這個庫時，我安裝的 react-leaflet 安裝了最新版本。 withLeaflet和MapControl在該版本中不再存在。

為了解決這個問題，我遵循了“節點應用程序中相同 npm package 的兩個版本”的答案中的建議。 這允許我在源代碼中將 RLV2 視為一個單獨的 package ，方法是將其別名為'react-leaflet-v2' ，我可以這樣做

import { withLeaflet, MapControl } from 'react-leaflet-v2'

太好了，現在 typescript 很高興，我可以將相應版本的 react-leaflet 導入到相應的組件中，並且輸入正確。 但是，當我使用tsc編譯回 js 時，我的 V2 組件中使用的 package 名稱仍然是'react-leaflet-v2' 。

問題是該庫的最終用戶將使用RLV2 或 RLV3，並且在他們的項目中將其簡單地稱為'react-leaflet' 。 庫的編譯文件需要能夠找到'react-leaflet' ，而不是某個別名，無論它們使用的是什么版本。

如何在兩個依賴版本的開發中保持類型安全，但讓我的用戶不用擔心，這意味着只需安裝他們想要使用的 react-leaflet 版本，從庫中導入正確的組件，並擁有組件在他們的項目中找到'react-leaflet'依賴項？ 編譯時是否可以告訴tsc將'react-leaflet-v2'重命名為'react-leaflet' ？ 還有其他解決方案嗎？

Answer 1

於是我想出了一個辦法。 它並不完美，但基本上：

使用通天塔

我沒有使用tsc轉譯我的 ts 文件，而是使用 babel，僅用於那些具有別名節點模塊導入的文件。 我找到了babel-plugin-transform-rename-import ，它可以在編譯時重命名導入。 將它添加到標准 babel 配置中，我有這個：

{
  "presets": ["@babel/preset-env", "@babel/preset-typescript"],
  "plugins": [
    "@babel/plugin-proposal-object-rest-spread",
    "transform-react-jsx",
    "@babel/plugin-proposal-class-properties",
    [
      "transform-rename-import", // <--- solution here
      { "original": "react-leaflet-v2", "replacement": "react-leaflet" }
    ]
  ]
}

這是反應 typescript 文件的標准設置，帶有一些額外的美女和口哨。 如您所見，它將所有從“react-leaflet-v2”的導入重命名為“react-leaflet”。

考慮到我的項目被組織成將所有這些 RLV2 文件放在它們自己的文件夾中，我編寫了一個腳本來使用常規tsc命令來編譯所有常規組件，但使用帶有該配置的 babel 來僅轉換 v2 目錄中的文件。 然后我使用tsc --emitDeclarationOnly true為 v2 文件編寫.d.ts文件。

請注意，這很好用，因為我的庫沒有從“react-leaflet-v2”導入任何純打字稿聲明，這意味着沒有從“react-leaflet-v2” import { TypeOrInterfaceOrEnum } from 'react-leaflet-v2' - 所有導入都只是組件或函數。 如果我從 react-leaflet-v2 導入了類型信息，我的.d.ts文件中仍然會import something from 'react-leaflet-v2' ，我還需要以某種方式對其進行轉換。 也許 babel 也可以這樣做，但我現在沒有必要探索它。