如何从Angular中的单个代码库构建多个应用程序

Question

我正在进行角度应用.我们的应用程序基于https://github.com/Swiip/generator-gulp-angular,一切正常.这个角度种子项目基本上扫描目录中的所有JS文件,并在您投入生产时将它们连接成一个JS文件.

我们正在为计费系统构建管理员后端.客户现在还希望为所有客户提供"公共后端".客户端基本上登录并发送消息的地方.UI对于公共后端是相同的,我们可以在任何地方重复使用相同的指令.唯一的问题是公共后端很小,管理员后端很庞大.我不认为为随机客户端提供完整的管理员应用程序是一种很好的做法.

如何从同一代码库构建两个应用程序？

Answer 1

不要从同一代码库中提供两个应用程序.这是灾难的秘诀.这是我如何处理这个问题的大致概述:

审核您已构建的应用程序.确定哪些组件可在两个项目之间重用,并将其确定为基础项目项目.
如果你考虑到模块化的东西,这不应该是后制动.您可能需要重构以使自己处于正确的位置.约翰帕帕的角度风格指南将是一个在这方面提供帮助的好地方(当我学习Angular时它很棒).
将该基础前端项目转换为可以独立于自定义应用程序代码更新的bower依赖项.更多关于在这里创建Bower包的信息.也许你甚至可以开源你所建造的东西？!？
在模块化基础构建之上构建自定义功能.每组自定义功能都是您的应用程序之一(在您的情况下,听起来像管理面板和公共应用程序).
发布后,您可以通过一个产品团队管理应用程序(如果它们大致相同).确定哪些功能很常见,将它们构建到基础应用程序中,并通过bower将这些更改部署到您的两个自定义应用程序中.基于每个项目添加自定义功能; 如果代码库分歧不足,您可以将其分成两个产品团队.

正如其他人所指出的那样,您将使用像Grunt/Gulp这样的良好构建工具来管理应用程序,这将为您提供公共依赖项.

Answer 2

我也不得不不同意接受的答案。维护一个代码库更加简单明了，并且耗时更少，并且在您的项目扩展到需要独立部署和构建的大量应用程序的情况下，这将是有利的。

定义构建

每个应用程序将有一个app.js文件，用于定义要导入的组件并从中进行构建。该结构可能类似于以下内容：

components
-- component-1
-- component-2
-- component-3
app-1
-- app.js
app-2
-- app.js

要构建app-1，我们需要组件1和3，因此在app-1 / app.js中我们将定义：

require('../components/component-1/file.js')
require('../components/component-3/file.js')

如果要单独部署与用户相关的设置，则可以创建UserSettings模块及其自身的路由，并包括该模块所需的组件。然后，该模块将包含在您的应用程序的构建中。这同样适用于路由，配置，运行等-最佳情况下，它们全部都属于一个模块或组件。

依存关系

在某个时候，您将面临以下问题：您是否要一次性捆绑所有应用程序的依赖关系，还是要为每个应用程序单独创建捆绑包。到目前为止，我想出的唯一解决方案是为每个应用程序整理依赖项的手动列表，并根据该列表执行捆绑程序，但是我敢肯定有更好的方法。