NX工作区技术问询：现有应用转宿主及现有库设为远程方法

1. 如何将现有库添加为宿主的远程项目？ #

要将NX工作区内的现有库转为宿主可加载的远程项目，按以下步骤操作：

• 修改库的project.json配置：
  • 调整targets.build的输出配置，确保产物支持远程模块加载。比如React项目需设置outputPath为dist/libs/[你的库名]，并在options中启用远程构建相关参数；Angular项目则需在build目标中添加library: true，并配置正确的输出路径。
  • 添加serve目标，使用@nrwl/web:dev-server（或对应框架的dev-server），指定独立端口和publicHost，保证宿主能访问到远程服务地址。示例配置：

    "serve": {
      "executor": "@nrwl/web:dev-server",
      "options": {
        "port": 4201,
        "publicHost": "http://localhost:4201",
        "buildTarget": "[你的库名]:build"
      }
    }
    

• 配置宿主项目的远程加载规则：
  在宿主的module-federation.config.js（或对应框架的联邦配置文件）中，将该库添加到remotes字段：

  remotes: {
    [远程模块名]: 'http://localhost:4201/remoteEntry.js'
  }
  

  Angular项目则需在模块中通过loadRemoteModule方法引入远程库。
• 验证启动：先启动远程库的服务，再启动宿主项目，确认远程模块能正常加载。

2. 现有应用能否转为宿主项目？批量添加库为远程的方法？ #

现有应用转宿主项目 #

NX不允许新建与现有应用同名的宿主项目（这就是你收到错误提示的原因），但可以直接改造现有应用为宿主，无需新建项目：

• 运行对应框架的宿主生成命令，指定现有应用名称作为目标项目。比如Angular项目：

  nx g @nrwl/angular:host [现有应用名] --projectName=[现有应用名]
  

  React项目则使用@nrwl/react:host生成器。
• 调整应用的构建与启动配置，集成模块联邦逻辑，确保宿主能正确加载远程模块。

批量添加现有库为远程项目 #

不需要新建远程项目再拷贝代码，两种高效方案：

• 批量执行生成器命令：对每个目标库运行对应框架的远程生成命令，直接将现有库改造为远程项目。比如Angular项目：

  nx g @nrwl/angular:remote [库名] --projectName=[库名]
  

  可编写shell脚本循环处理所有目标库。
• 编写配置脚本：写一个Node脚本，遍历所有目标库的project.json，自动添加远程构建、服务的目标配置，同时批量更新宿主的模块联邦配置文件，统一添加remotes条目。

内容的提问来源于stack exchange，提问作者Mohammad K.