如何仅构建main.bundle.js？Angular主应用与插件构建优化问询

你目前通过在angular-cli.json中配置多应用来分别构建主应用和插件，再手动移动产物的流程确实可以优化，下面给你几个实用的方案，按推荐优先级排序：

方案一：改用Angular Library模式（官方推荐） #

从Angular 6开始，CLI原生支持Library模式，这正是为封装可复用组件/插件设计的，比多应用配置更贴合你的场景：

• 先创建Library：ng generate library my-plugin
• 把主应用中需要封装的组件迁移到Library里，记得在projects/my-plugin/src/public-api.ts中导出这些组件，确保主应用能引用到
• 构建Library：ng build my-plugin，产物会生成在dist/my-plugin目录
• 主应用中可以直接像引用第三方库一样使用Library的组件（CLI会自动把Library链接到主应用的node_modules）
• 最后构建主应用时，CLI会自动处理Library的依赖打包，一步完成主应用+插件的构建，完全不用手动移动文件

方案二：用npm脚本自动化构建+产物移动 #

如果暂时不想切换到Library模式，可以通过npm脚本把多个步骤合并成一个命令，省去手动操作：

1. 打开项目根目录的package.json，在scripts字段中添加：

"build:all": "ng build main-app && ng build plugin-app && cp -r dist/plugin-app/* dist/main-app/plugin/"

注意：把main-app和plugin-app替换成你在angular-cli.json中配置的应用名称；dist/main-app/plugin/是你想要放置插件产物的目标目录，如果是Windows系统，把cp换成xcopy /E /I即可

2. 之后只需要运行npm run build:all，就能自动完成主应用构建→插件构建→产物移动三个步骤

方案三：用Angular Architect自定义组合构建目标 #

如果需要更灵活的构建流程（比如区分开发/生产环境、添加额外构建钩子），可以利用Angular Architect定义组合构建任务：

1. 在angular.json（旧版本对应angular-cli.json）中添加一个新的architect目标，比如build-all：

"build-all": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    "main": "src/main.ts",
    // 这里填主应用的基础构建配置
  },
  "configurations": {
    "production": {
      // 主应用生产环境的配置项
    }
  },
  "dependsOn": [
    "build:plugin-app:production",
    "build:main-app:production"
  ]
}

2. 再配合@angular-devkit/build-angular:copy构建器，添加自动移动产物的步骤，这样运行ng run your-project-name:build-all:production就能触发所有依赖的构建任务，并自动完成产物迁移

总结 #

优先推荐方案一的Library模式，这是Angular官方针对组件封装的标准方案，后续维护、版本管理和扩展都更省心；如果暂时无法重构，方案二的npm脚本是最快速的优化方式，几分钟就能搞定。

内容的提问来源于stack exchange，提问作者abdul-wahab