具有多個 '@/ ' 路徑別名的單一存儲庫 - 在 TypeScript 中可行，但在 Webpack 編譯器中不可行

我覺得這不可能，但值得一問，畢竟我不是 webpack 專家！

我們有一個包含許多不同工作區套件的單一版本庫，使用 TypeScript，並且使用 webpack 构建。

每個工作區都有自己的 tsconfig.json 和自己的 webpack.config.js 用來構建該套件。

每個路徑別名都會被宣告，例如 @package-a、@package-b 等。

有些套件已從它們自己的獨立倉庫導入，並將 @ 宣告為指向自身的別名。

這意味著我們在不同的套件中有多個 @ 別名。

ts 設定

"paths": {
      "@/*": ["./src/*"],
      "@package-a/*": ["./src/*"],
      "@package-b/*": ["../package-b/src/*"],
      "@package-c/*": ["../package-c/src/*"]
}

所以在程式碼中你可以匯入像是

import { Thing } from '@/data/models/Thing';
import { stuff, in, other, package } from '@package-c/otherThings';

然而，這有效，因為每個都有一個本地的 tsconfig.js 文件，看起來在套件層級上運作。

問題出現在編譯時。當我們有跨套件依賴時——並且兩個檔案都使用它們的本地別名 @——編譯器不知道該使用哪一個。

Webpack 對構建有自己的別名

resolve: {
    alias: {
      "@": path.resolve(__dirname, 'src/'),
      "@package-a/*": path.resolve(__dirname, 'src/'),
      "@package-b": path.resolve(__dirname, '../package-b/src/'),
      "@package-c": path.resolve(__dirname, '../package-c/src/')
    },
  }

但很明顯，在構建時，對於該套件僅使用一個 webpack 配置。

有沒有其他方法可以解決這個問題——還是我們只能將所有 @/* 的引用重新命名為它們自己的套件名稱？

答案＃1

你已經建立了一個多專案專案。有許多工具可以處理這些專案：「Yarn Workspaces」、「Npm Workspaces」以及 Lerna

Lerna 是一個用於管理多個 JavaScript 套件的專案的工具。Lerna 管理單一儲存庫（monorepo），該儲存庫可以內含多個套件的專案。

我以前使用過 Lerna，你可以用它來建立一個專案

 lerna init

這將會建立 "packages" 目錄以及 lerna.json 檔案。你可以將你的 webpack 專案 "package1, package2" 加入到 packages 目錄中。如果你想要連結套件：

// setting package1 as package2 dependencies 
lerna add package1 --scope=package2

你可以在 package2 的 package.json 中檢查其依賴項。如果你使用 Lerna，使用者必須在他們的機器上安裝 lerna CLI 工具才能啟動專案。