架构：结合几个 JavaScript 项目（模块化）[关闭]

Question

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

到目前为止，很清楚。现在的目标是为三个核心项目中的每一个添加插件模块成为可能。模块应该扩展任一项目的 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 一起使用以自动化包之间的链接，here are their reasons to have a monorepo。

Answer 2

几个月前我遇到了类似的问题。由于您熟悉 Grunt 或 Gulp 等流式构建系统，因此安装动态依赖项可以相当容易地解决。

1. 您可以在 package.json 中分配一个属性，例如依赖项或 devdependencies，它将保存您需要的所有其他信息，bower.json 甚至自定义 JSON 文件也可以解决问题。我更喜欢 NPM 打包清单或 Bower 清单，因为它们为每个模块提供了一个有效的入口点。
2. 使用grunt-auto-install，您可以为构建过程动态安装任何其他模块依赖项，您可以从项目的主package.json 文件中解析这些依赖项。
3. 使用每个附加 package.json 中每个模块的 main 属性将为您提供一个文件列表来初始化 uglify 或连接任务。

Answer 3

您在 MEAN 项目中添加了不必要的复杂性。
为什么要通过 grunt 连接两个 html 部分？？？
您应该使用 AngularJS 的 SPA 架构，他们采用这种架构是有原因的。其中一个没有在此类问题中运行。
无需连接文件，只需配置 SPA 的状态以从 html 文件调用所需的部分模板。就是这样！
并在您的后端使用 Web 服务（我认为您正在这样做），这样您就可以独立于数据的来源，因为无论它来自哪个服务器，您都在使用 URI。
关于依赖关系，您可以在前端或后端无缝使用 npm，并带有 --save 标志，以便将它们添加到 package.json 文件中，然后将该文件复制到相应的应用程序目录和 npm install 。
但是我真的不知道你将如何处理这一切，如果你能解释更多关于有助于理解它的功能要求的信息..

Answer 4

我通常完全按照您在 1 中描述的操作。但我使用本地依赖项，这些依赖项将由我的构建链连接起来。

npm install ~/project_root/sub_project --save-dev

这样你就不需要一直推送它。您只需删除 node_module/sub_project 文件夹并在构建链中再次运行 npm install。

使用 browserify，您可以将依赖项添加到您的 Angular 项目中。

插件不能单独运行。

我通常将我的服务或指令开发为常规的 JavaScript 类，并用 angular 封装它们。

var Service = require("./path/to/service.js")
module.exports = [function() {
    return {
        restrict: 'AC',
        link: function($scope, $element) {
            var someService = new Service();
            $scope.$watch("whatever",function(value){
                service.doSomething();
            })
        }
    };
}];

通过这种方式，您可以独立于 Angular 运行和测试它们。这在使用WebWorkers 时也很有优势。因为它们不能真正（完全）与 angular 1.X 一起使用。