关于 Angular 2 部署和 Node_Modules 的说明
这是一篇关于一个愚蠢、强制、糟糕，但又并非非常糟糕的方法来部署 Angular 2 那庞大的 42.8MB 的“node_modules”文件夹的说明。
引言
这是一篇关于一个愚蠢、强制、糟糕，但又并非非常糟糕的方法来部署 Angular 2 那庞大的 42.8MB 的“node_modules”文件夹的说明。
背景
这篇说明不是关于如何开发 Angular 2 应用程序。而是关于如何部署庞大的“node_modules”文件夹。如果您查看我之前关于 Angular 2 环境的说明，您会发现 Angular 2 的“node_modules”文件夹有 42.8MB。
- 如果使用 TypeScript，这个庞大的“node_modules”文件夹对于编译您的 TypeScript 文件是必需的。
- 这个庞大的“node_modules”文件夹在运行时也是必需的，因为浏览器需要从这个文件夹下载文件。
但是，这个庞大的“node_modules”文件夹给源代码管理和部署带来了问题。我们真的想将这 42.8MB 的文件提交到源代码管理并打包到安装程序中吗？
附件是一个 Angular 2 应用程序。如果您不知道如何在 Visual Studio 中设置环境来运行 Angular 2 应用程序，您可以查看我之前关于 Angular 2 环境的说明。这个例子的目的是向您展示一个愚蠢、强制、糟糕，但又并非非常糟糕的方法，可以将庞大的“node_modules”文件夹缩小到 1.9MB，以用于源代码管理和部署。
如果您想下载解决方案并运行它，并且您不是 Angular 2 和 TypeScript 专家，我建议您查看我之前关于 Angular 2 环境的说明。如果您没有正确设置环境，您可能无法编译和运行应用程序。您可能需要与困难搏斗一段时间才能让您的 Angular 2 应用程序运行起来。
运行应用程序
如果您遵循了我之前关于 Angular 2 环境的说明中的指示，并且一切正常，您就可以运行应用程序。这个简单的 SPA（单页应用程序!!!!）设置了一个定时器，通过 Angular 绑定周期性地更新圆点的颜色。如果您打开开发者工具并查看网络流量，您可以看到浏览器运行应用程序所需的文件。
如果您按“node_modules”过滤列表，您可以看到来自“node_modules”文件夹的 26 个文件。如果您将鼠标悬停在每个项目上，您可以看到文件所在的精确路径。
手动复制文件并更改引用
因为我们可以很容易地在运行时获取“node_modules”中所需文件的列表，所以我们可以轻松地将它们复制到所需的位置。
在我的示例中，我将所有 26 个文件复制到了“/scripts/NG2”文件夹。这个过程花了大约 5 分钟。我们还需要更改“systemjs.config.js”和“Index.cshtml”文件中的引用，以指向更改后的位置。
更改后，我们可以运行应用程序。我们可以看到应用程序运行良好，并且所有 Angular 依赖项都来自“/scripts/NG2”文件夹。随着 Angular 2 运行时依赖项降至 1.9MB，源代码管理和部署变得更加容易。
这 26 个文件足够吗？
当我们尝试将文件复制到“/scripts/NG2”文件夹时，最大的挑战是 Angular 团队从未给我们提供文件列表。我们无法确切知道文件列表。非常有可能遗漏一些文件。如果我们遗漏了一个文件，应用程序将无法运行。
幸运的是，开发工具可以精确地告诉我们缺少哪个文件。我们可以将该文件添加到列表中。最好在开发时完成这项工作。如果我们发现任何缺失的文件，我们应该添加它们并正确地进行源代码管理。我在这里选择的 26 个文件对于许多用例来说应该足够了，并且应该作为我们收集最常用的 Angular 运行时依赖文件集合的起点。
为什么 Angular 2 发起这么多 HTTP 请求？
对于这个简单的网页，Angular 2 发起了 36 个 HTTP 请求，这应该让您感到惊讶。对于如此简单的网页来说，这是一个很大的数字。在收集运行时依赖列表时，我看了一些文件。虽然有几个较大的文件，但大多数文件都非常小。例如，“isArray.js”文件非常小，如下所示
"use strict";
exports.isArray = Array.isArray || (function (x) { return x && typeof x.length === 'number'; });
//# sourceMappingURL=isArray.js.map
“isFunction.js”文件非常小，如下所示
"use strict";
function isFunction(x) {
return typeof x === 'function';
}
exports.isFunction = isFunction;
//# sourceMappingURL=isFunction.js.map
“isObject.js”文件非常小，如下所示
"use strict";
function isObject(x) {
return x != null && typeof x === 'object';
}
exports.isObject = isObject;
//# sourceMappingURL=isObject.js.map
Angular 团队是否应该将这些文件移到一个更大的实用程序文件中，以减少网络流量并减少文件列表中的文件数量？我认为他们应该这样做。在这种情况下，我们在运行时遗漏任何依赖文件的几率就更小了。
关注点
- 这是一篇关于一个愚蠢、强制、糟糕，但又并非非常糟糕的方法来部署 Angular 2 那庞大的 42.8MB 的“node_modules”文件夹的说明；
- 这项工作是愚蠢的，因为它从一开始就不应该是我的工作。这是 Angular 团队的工作。他们最了解运行时所需的文件。他们应该为我们提供一个运行时捆绑包。他们不应该把搜索依赖列表的任务交给我们；
- 这项工作是强制的，因为我需要一直查看开发工具，以查看是否遗漏了任何依赖文件；
- 这项工作是糟糕的，因为它既愚蠢又强制；
- 这项工作是可怕的，但并非非常可怕，因为查找缺失的文件并不困难。在 Angular 团队为我们提供捆绑包之前，这项工作对于源代码管理和部署是必要的，因为 Angular 团队推荐的“node_modules”文件夹确实很大；
- 希望您喜欢我的博文，并希望这篇笔记能以某种方式帮助您。
历史
- 2016/12/17：首次修订