架构:结合多个JavaScript项目(模块化)

Question

我想为我的JavaScript项目创建一个干净的结构.该项目由一个Node.js服务器和两个单独的Angular.js前端组成,具有不同的用途.为了构建前端,我使用每个自定义的grunt构建.构建产生每个项目一个HTML文件和两个缩小/丑化的CSS和JavaScript文件.然后,每个前端在节点服务器的单独最小版本上运行(仅提供静态文件).

到目前为止,这么清楚.现在的目标是使插件模块能够添加到三个核心项目中的每一个.模块应该扩展其中一个项目的JavaScript.这意味着例如在一个前端的情况下将额外的角度模块添加到角度配置.我已经知道在哪里以及如何将角度模块代码添加到核心应用程序中.

现在的问题是:如何在多个项目上创建合理的构建过程,这也依赖于插件模块？我想出了两个解决方案.

1. 我可以将插件作为NPM依赖项添加到其中一个核心项目中.然而,这有一个缺点,即需要将模块中的每个更改推送到NPM,并且开发这样的插件模块并不是很方便.插件本身不可运行.
2. 我可以在其中一个核心项目的Gruntfile中找到一个插件列表.此列表将包含模块的本地文件路径.在构建核心模块时,将执行插件的构建.然而,这将包括观察插件的构建文件的更改.这是一个不洁净的解决方案.
3. 我可以有另一个项目,它包含对核心项目和所有插件的依赖关系,并将它们构建在一起.如何添加依赖关系的问题仍然存在(案例1或2)

你会如何解决这个问题？

Answer 1

恕我直言，它与任务管理器工作无关（又名 gulp、grunt 甚至 webpack，这里并不重要）。社区发展到一个地方，您拥有大量（相对）微小的节点模块，这些模块只做一件事并且做得很好，因此它与您的第一个建议非常相关。

VCS 存储库可能类似于以下结构：

my-repo/
  package-1/
    package.json
  package-2/
    package.json
  package-3/
    package.json
  ...

...然后您可以npm link在模块本身内部创建符号链接，这样您就不必发布模块来获取更新。

有一个名为lerna的相当新的包，它可以自动执行此npm link操作（它检测“本地”模块中的依赖关系图并在它们之间建立链接），您所需要做的就是遵循它们的结构。此外，它使发布变得智能，您可以在所有包中运行命令以及一堆其他相关的东西。

Babel和React是这种模块关注点分离的很好的例子。Babel 致力于lerna自动化包之间的链接，以下是他们拥有 monorepo 的原因。