如何配置NX可构建库仅关联Host应用而非首个Remote

问题背景 #

• 已搭建含微前端的NX单体仓库，包含app1至app7共7个应用，以及两个可构建库：
  • common：非UI共享逻辑库
  • common-ui：共享UI组件库
• 所有应用均依赖这两个库，远程微前端通过发布流水线存储在Azure Blob存储中
• 本地运行Host应用加载所有Remote应用正常，但部署后出现异常：希望仅将common和common-ui与Host关联构建，但修改common-ui后，必须重新部署app1才能生效（app1本身无任何修改）
• 当前加载应用时，common-ui代码均来自app1的路径，例如：url/app1/file.js

现有配置文件 #

nx.json #

{
  "$schema": "./node_modules/nx/schemas/nx-schema.json",
  "npmScope": "1talent",
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx/tasks-runners/default",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"]
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"]
    },
    "test": {
      "inputs": ["default", "^default", "{workspaceRoot}/jest.preset.js"]
    },
    "lint": {
      "inputs": ["default", "{workspaceRoot}/.eslintrc.json"]
    }
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "babel": true
      },
      "component": {
        "style": "css"
      },
      "library": {
        "style": "css",
        "linter": "eslint"
      }
    }
  },
  "defaultProject": "host"
}

tsconfig.base.json #

{
  "compileOnSave": true,
  "compilerOptions": {
    "rootDir": ".",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2017", "dom"],
    "skipLibCheck": true,
    "skipDefaultLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@myApp/common": ["libs/common/src/index.ts"],
      "@myApp/common-ui": ["libs/common-ui/src/index.ts"]
    }
  },
  "exclude": ["node_modules", "tmp"]
}

需求 #

配置NX工作区，使构建Host生产应用时同时构建common与common-ui库，避免修改共享库后需要重新部署依赖它的Remote应用。

内容的提问来源于stack exchange，提问作者Jagdish Chaudhari