紗線工作區 -- package 別名

Question

TL;DR 如何為本地紗線工作區依賴項創建別名？

我之前嘗試過紗線工作區，但從未成功，我正在再試一次。

我在package.json中設置了"workspaces": ["packages/*"] 。

對於每個 package，我決定使用命名約定@-/package-name來防止命名沖突，而不用擔心內部包的命名空間。

在將包添加為依賴項時，我一直遵循一種使用接口名稱進行解析的風格，但將其指向具體的實現。 這是我在使用紗線工作區之前所做的：

"dependencies": {
  "my-interface-name": "file:some/path/to/packages/some-concrete-implementation"
}

這基本上是為了允許我喜歡稱之為編譯時 static 依賴注入。 這也意味着每個 package 都可以根據需要單獨命名其接口依賴項，並防止命名沖突。

但是，我不知道如何使用紗線工作區來實現這一點。 如何為我的紗線工作區 package @-/some-concrete-implementation創建別名my-interface-name ？

我已經嘗試過但沒有成功：

• 定義像"my-interface-name": "@-/some-concrete-implementation"}這樣的依賴項——由於某種原因，這會導致紗線在 npm 注冊表上而不是在本地查找@-/some-concrete-implementation工作區
• 我還嘗試使用工作區協議： "my-interface-name": "workspace:@-/some-concrete-implementation"} ，但它仍然在 npm 注冊表上查找 package！

我還沒有嘗試過並且可以工作但首先消除了使用紗線工作區的好處：

• "dependencies": {"my-interface-name": "file:../../node_modules/@-/some-concrete-implementation"}"

Answer 1

你見過package.json 鍵的resolutions嗎？ 這是你需要的嗎？

我已將它用於別名/覆蓋外部包，但文檔中的示例顯示它與本地包一起使用。

決議

允許您覆蓋特定嵌套依賴項的版本。 有關完整規范，請參閱Selective Versions Resolutions RFC 。

{
  "resolutions": {
    "transitive-package-1": "0.0.29",
    "transitive-package-2": "file:./local-forks/transitive-package-2",
    "dependencies-package-1/transitive-package-3": "^2.1.1"
  }
}

來自 RFC：

“**/a”表示項目的所有嵌套依賴a。

"a" 是 **/a 的別名（為了追溯兼容性，請參見下文，因為如果它不是這樣的別名，則它沒有任何意義，因為它代表了非嵌套項目依賴項之一，它不能被覆蓋，如下所述）。

所以，我相信你需要的規則是：

"**/my-interface-name": "file:some/path/to/packages/some-concrete-implementation"

// OR equivalent

"my-interface-name": "file:some/path/to/packages/some-concrete-implementation"

我相信它適用於包裝的 package.json。 在最壞的情況下，您可以將其提升到工作區根目錄，並使規則特定於工作區，例如“a/b”。

Answer 2

工作區：別名協議（也可以在 pnpm 中使用）似乎是要采取的方向。

我還嘗試使用工作區協議：“my-interface-name”：“workspace:@-/some-concrete-implementation”}，但它仍然在 npm 注冊表上查找 package！

一定要安裝 yarn 3，否則你會遇到奇怪的問題。

請注意"my-interface-name": "workspace:@-/some-concrete-implementation"的語法看起來不正確。

它應該是"@xxx/some-concrete-implementation": "workspace:*",假設鏈接 package 的名稱是"name": "@xxx/some-concrete-implementation" 。

考慮到這一點，您甚至不需要創建特定的@-/name 。 使用工作空間協議，yarn 將確保它永遠不會從 npm 下載。 它成為內部工作區依賴項。

PS：

---

紗線 3 安裝

通常一個簡單的yarn set version 3.0.2 && yarn plugin import workspace-tools ) 就可以了。

為避免 pnp 電流限制，請檢查生成的配置.yarnrc.yml並確保 nmLinker 設置為“node-modules”

# Yarn 2+ supports pnp or regular node_modules installs. Use node-modules one.
nodeLinker: node-modules
plugins:
  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
    spec: "@yarnpkg/plugin-workspace-tools"
yarnPath: .yarn/releases/yarn-3.0.2.cjs

PS：您可能也想將其添加到.gitignore

.yarn/*
!.yarn/patches
!.yarn/releases
!.yarn/plugins
!.yarn/sdks
!.yarn/versions
.pnp.*

之后運行yarn install 。

關於 package.json 的

像您一樣，根package.json將定義工作區路徑：

{
  "name": "monorepo",
  "workspaces": [
    "packages/*"  // Enable package discovery in packages/* directory.
  ],
  // ... 
  "devDependencies": {
    "husky": "7.0.2", // Only what's needed for monorepo management
  }

在您的應用程序packages/app/package.json

{
  "name": "my-app",
  "devDependencies": {
    "@types/node": "16.10.1",
    //...
  },
  "dependencies": {
    // Assuming the name of packages/shared is "@your-org/some-concrete-implementation",
    // we explicitly declare the dependency on it through
    // workspace: alias (package-manager perspective)
    "@your-org/some-concrete-implementation": "workspace:*",
  }
}

您使用的 package 應該聲明相同的名稱

{
  "name": "@your-org/some-concrete-implementation",
}

---

獎勵：Typescript 別名

如果你的項目是用 ts 編寫的，你甚至可以通過typescript 路徑映射來復制你的路徑。 它將允許按原樣包含文件（無需事先編譯）。

按照您的示例，只需以這種方式編輯./packages/xxx/tsconfig.json

{
  "compilerOptions": {
    // here baseUrl is set at ./src (good practice), can
    // be set to '.'  
    "baseUrl": "./src",
    "paths": {
      // Declare deps here (keep them in sync with what
      // you defined in the package.json)
      // PS: path are relative to baseUrl
      "@your-org/some-concrete-implementation/*": ["../../some-concrete-implementation/src/*"],
      // if you have a barrel in ui-lib 
      "@your-org/some-concrete-implementation": ["../../some-concrete-implementation/src/index"],
    }
  },
}

PS：對於非typescript： babel/plugin-module-resolver可以類似的方式使用。