Yarn 工作区不建立本地依赖性

Question

我删除了我的旧问题，以提供更多信息。我在带有 Angular 应用程序和库的 monorepo 上使用 Yarn 工作区 (v1.22)。我将库声明为应用程序的依赖项。

root
   |
   ---projects
         |
         ---lib (components)
         |
         ---app

每个项目都有其关联的构建脚本。如果我运行 yarn 在根目录或 yarn workspace app install 处重新签出，它会安装所有内容并链接到 lib 的项目文件夹，但它不会执行必要的构建，因为我的 tsconfig 路径包含构建的输出 dist/lib。安装的最后一步说“构建新包”，但由于某种原因它不会触发 lib 的构建。

tsconfig.json（基础）

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@fabric/components/*": [
        "./dist/components/*"
      ]
    }
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

根包

{
  "name": "fabric",
  "private": true,
  "license": "UNLICENSED",
  "workspaces": [
    "projects/*"
  ],
  "engines": {
    "node": ">=12.0.0 < 16.0.0",
    "yarn": ">= 1.0.0",
    "npm": "Please use Yarn instead of NPM to install dependencies. See: https://yarnpkg.com/lang/en/docs/install/"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "components": "yarn workspace @fabric/components",
    "guide-app": "yarn workspace @fabric/guide-app",
    "test": "yarn guide-app test && yarn components test",
    "postinstall": "ngcc"
  },
  "dependencies": {
    "@angular/animations": "12.0.2",
    "@angular/cdk": "12.0.2",
    "@angular/common": "12.0.2",
    "@angular/compiler": "12.0.2",
    "@angular/core": "12.0.2",
    "@angular/flex-layout": "12.0.0-beta.34",
    "@angular/forms": "12.0.2",
    "@angular/localize": "12.0.2",
    "@angular/material": "12.0.2",
    "@angular/platform-browser": "12.0.2",
    "@angular/platform-browser-dynamic": "12.0.2",
    "@angular/router": "12.0.2",
    "rxjs": "6.6.7",
    "tslib": "2.2.0",
    "zone.js": "0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "12.0.2",
    "@angular-devkit/core": "12.0.2",
    "@angular-devkit/schematics": "12.0.2",
    "@angular/cli": "12.0.2",
    "@angular/compiler-cli": "12.0.2",
    "@angular/language-service": "12.0.2",
    "@schematics/angular": "12.0.2",
    "@types/jest": "26.0.23",
    "@types/node": "14.14.37",
    "codelyzer": "6.0.2",
    "jest": "26.6.3",
    "jest-junit": "12.1.0",
    "jest-preset-angular": "8.4.0",
    "jest-transform-stub": "2.0.0",
    "ng-packagr": "12.0.2",
    "protractor": "7.0.0",
    "tslint": "6.1.3",
    "typescript": "4.2.4"
  }
}

lib 包

{
  "name": "@fabric/components",
  "version": "5.0.2",
  "license": "UNLICENSED",
  "engines": {
    "node": ">=12.0.0 < 16.0.0",
    "yarn": ">= 1.0.0",
    "npm": "Please use Yarn instead of NPM to install dependencies. See: https://yarnpkg.com/lang/en/docs/install/"
  },
  "scripts": {
    "build": "ng build components --configuration production",
    "watch": "ng build components --watch",
    "test": "jest --config ./jest.config.js"
  },
  "dependencies": {
    "@fontsource/roboto": "^4.4.0",
    "tslib": "^2.2.0"
  },
  "peerDependencies": {
    "@angular/cdk": "^12.0.0",
    "@angular/common": "^12.0.0",
    "@angular/core": "^12.0.0",
    "@angular/flex-layout": "^12.0.0-beta.34",
    "@angular/localize": "^12.0.0",
    "@angular/material": "^12.0.0"
  }
}

应用包

{
  "name": "@fabric/guide-app",
  "version": "5.0.1",
  "license": "UNLICENSED",
  "engines": {
    "node": ">=12.0.0 < 16.0.0",
    "yarn": ">= 1.0.0",
    "npm": "Please use Yarn instead of NPM to install dependencies. See: https://yarnpkg.com/lang/en/docs/install/"
  },
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --configuration production",
    "watch": "ng build --watch --configuration development",
    "test": "jest --config ./jest.config.js",
    "lint": "ng lint",
    "e2e": "ng e2e",
  },
  "private": true,
  "dependencies": {
    "@fabric/components": "^5.0.0",
    "@ngx-translate/core": "~13.0.0",
    "@ngx-translate/http-loader": "~6.0.0",
    "ngx-highlightjs": "~4.1.3"
  }
}

所以我想，首先，我的假设是否正确，Yarn 应该构建依赖包？如果是这样，我的配置中是否有不正确的地方？如果这不是 yarn 产品的一部分，您对可以添加什么来支持它有什么建议吗？

Answer 1

您的文件夹结构 workspaces 和 dependencies 设置正确。为了让 yarn 调用你的构建脚本，你必须将它添加到你的 lib 包的 postinstall and/or prepare 脚本中：

{
  "scripts": {
    "build": "...",
    "postinstall": "yarn build"
  }
}

安装app包时，应该运行安装其所有依赖的post脚本。但是请注意，在不同的上下文中使用 lib 时可能不需要这种副作用，例如作为一个独立的包。

请注意，在对 lib 进行更改时，您必须提升其版本，并且该版本必须在其 dependencies 中指定的 app 范围内。只有这样，纱线才会在重新安装 app.

时重新执行其 post 安装脚本

除此之外，我注意到您使用 tsconfig 的 compilerOptions.paths 来引用 lib。还有另一种方法可以使用 typescript references. A good starting point is this article.

Yarn 工作区不建立本地依赖性

Yarn Workspaces Not Building Local Dependency

monorepo

yarnpkg

yarn-workspaces