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

Question

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

我们正在为结算系统构建管理员后端。客户现在也想要一个＆＃34;公共后端＆＃34;为他们所有的客户。客户端基本上登录并发送消息的地方。 UI对于公共后端是相同的，我们可以在任何地方重复使用相同的指令。唯一的问题是公共后端很小，管理员后端很庞大。我不认为为随机客户端提供完整的管理员应用程序是一种很好的做法。

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

Answer 1

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

1. 审核您已构建的应用程序。确定哪些组件可在两个项目之间重用，并将其确定为基础项目项目。
2. 如果你考虑到模块化的东西，这不应该是后制动。您可能需要重构以使自己处于正确的位置。 John Papa's Angular Styleguide将是一个在这方面提供帮助的好地方（因为我学习了Angular，所以很棒。）
3. 将该基础前端项目转换为可以独立于自定义应用程序代码更新的bower依赖项。 More on creating a Bower package here。也许你甚至可以开源你所建造的东西？！？
4. 在模块化基础构建之上构建自定义功能。每组自定义功能都是您的应用程序之一（在您的情况下，听起来像管理员面板和公共应用程序）。
5. 发布后，您可以通过一个产品团队管理应用程序（如果它们大致相同）。确定哪些功能很常见，将它们构建到基础应用程序中，并通过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模块，并包含此模块所需的组件。然后，此模块将包含在应用程序的构建中。这同样适用于路线，配置，运行等。 - 最佳地，这些都适用于一个模块或组件。

<强>依赖关系

在某些时候，您将面临是否要一次性捆绑所有应用程序的依赖关系，或者为每个应用程序单独创建捆绑包的问题。到目前为止，我提出的唯一解决方案是为每个应用程序策划依赖项的手动列表，并根据该列表执行捆绑器，但我确信有更好的方法。

Answer 3

我不同意这里提出的选项。如果我构建可重用的组件，那么将我的代码库拆分为3个不同项目的想法是可行的。但我只是拆分了我的应用程序。这些部分不会在我的任何其他项目中重复使用，因为它们是项目特定的。

维护3个不同项目（依赖项，构建，文档，发布，版本控制）的开销不值得。

我相信研究ES6导入（使用Webpack或System.js）或者RequireJS是一个更好的选择，但是我不知道它们如何在Angular1.X生态系统中工作。