如何在不必同时提供 `node_modules` 中的所有文件的情况下提供 AngularJS 2 应用程序？答案

【问题标题】：How can I serve an AngularJS 2 app without having to also serve all the files in `node_modules`?如何在不必同时提供 `node_modules` 中的所有文件的情况下提供 AngularJS 2 应用程序？
【发布时间】：2016-04-16 06:40:15
【问题描述】：

我正在尝试运行 Angular 2 seed application。不幸的是，npm install 将大量文件放入 node_modules，我认为我还必须与种子应用程序代码一起提供这些文件。

如果我只需要一些静态文件来让应用程序运行，我不想提供所有这些静态文件。有没有办法只为我真正需要的服务器提供服务？

我问的原因是因为 Google App Engine 开发环境 (dev_appserver.py) 限制了它可以提供的文件数量，而生产环境限制了可以上传的文件的组合大小。上传几兆字节的不必要文件会很丢脸。

【问题讨论】：

根据stackoverflow.com/questions/34526844/…，在为我的应用程序提供服务时，我不需要包含node_modules 目录——这将解决我的问题。但是，当我删除目录并运行应用程序 (npm start) 时，我看到应用程序无法运行，因为它需要在 node_modules 中加载文件。
也许browserify 可以帮忙？
我编写了一个不提供 node_modules 文件夹 (github.com/robianmcd/tag-trends) 的 Angular2 应用程序。我只是将服务器所需的所有内容复制到带有 gulp 的构建文件夹中。这是另一个做同样事情的项目，但 gulp 文件要简单得多：github.com/robianmcd/ng2-movies
我认为您应该阅读有关捆绑器的信息，例如 Webpack、SystemJS builder、Rollup、TypeScript（很快）、JSPM（其他？）。
你确实需要使用客户端构建系统，我建议看看Webpack

标签： angular google-app-engine npm

【解决方案1】：

使用 Angular 2 和 angular-cli，它非常简单。您不需要任何 gulp 或自定义脚本。只需使用 angular-cli ng build --prod 构建，它就可以很好地进行 treeshaking、缩小和生成非常小的和优化的包。我为此写了small post - 在 Google AppEngine 或 Firebase 上构建和部署 Angular 2 应用程序。

【讨论】：

【解决方案2】：

使用 angular-cli 命令 ng build。之后你会得到一个 dist 文件夹。

使用该 dist 文件夹作为您的应用程序的结尾，并使用以下 app.yaml 启动并运行您的项目。

https://gist.githubusercontent.com/darktable/873098/raw/0197279f7faf07a3f64689589f097790d198b22a/app.yaml

【讨论】：

始终欢迎提供指向潜在解决方案的链接，但请add context around the link，以便您的其他用户知道它是什么以及为什么存在。始终引用重要链接中最相关的部分，以防目标站点无法访问或永久离线。考虑到仅仅是指向外部网站的链接是Why and how are some answers deleted? 的一个可能原因

【解决方案3】：

这是由这个种子项目的 gulp 脚本处理的。

https://github.com/angular/angular2-seed/blob/e66d24fd34d37884cec41a3583bad563cf5a43e5/gulpfile.js#L15

gulp 任务将文件从node_modules 复制到dist/vendor。

//copy dependencies to dist folder
gulp.task('copy:deps', function(){
  return gulp.src([
    'node_modules/angular2/bundles/angular2-polyfills.js',
    'node_modules/angular2/bundles/angular2.dev.js',
    'node_modules/angular2/bundles/http.js',
    'node_modules/angular2/bundles/router.js',
    'node_modules/rxjs/bundles/Rx.js',
    'node_modules/systemjs/dist/system.js',
  ]).pipe(gulp.dest('dist/vendor'));
});

安装 gulp 后，只需输入 gulp 即可启动默认的 gulp 任务或运行 npm start 将调用 gulp clean && gulp

默认 gulp 任务还将所有其他 .js、.html 和 .css 文件复制到 dist 文件夹。 dist 文件夹将包含您必须部署的所有内容。

【讨论】：

【解决方案4】：

当您运行npm start 时，您会得到一个dist 文件夹。此文件夹包含您的整个应用程序。所以不需要服务node_modules。

【讨论】：

【解决方案5】：

在生产中使用库的 CDN 版本，例如：

<script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

这不仅可以让您省去处理将什么以及如何将库移动到您的可分发文件中的麻烦，而且如果最终用户从以前访问过的网页下载它们，它们还可以为最终用户节省一些时间。

【讨论】：

在哪里可以找到 CDN 版本的 URL？
CDN提供商很多，google有自己的：developers.google.com/speed/libraries

【解决方案6】：

您可以在应用的配置文件中使用the skip_files element 来排除不需要的文件：

skip_files 元素指定应用程序中的哪些文件目录不会上传到 App Engine。该值是正则表达式，或正则表达式列表。任何文件名从列表中省略匹配任何正则表达式的上传应用程序时要上传的文件。

注意覆盖该文档部分中的默认值。

注意：我不确定这是否会对开发服务器端有所帮助 - 在某些情况下它似乎忽略了该配置（但我似乎无法找到我的答案在一个中不起作用这种情况下了解详情）。

【讨论】：

这适用于上传到生产环境，但不适用于 App Engine 开发环境，因为 this bug。尽管互联网上有许多解决方法。我真正想要的是一种仅捆绑我的应用程序依赖于部署的文件的方法，而不必上传在node_modules 中找到的兆字节文件。
是的，这正是我添加注释的问题:) 你也应该star 它，希望这有助于引起注意。
很久以前出演了。 :-) 使用skip_files 的另一个问题是我不知道我真正需要node_modules 中的哪些文件。（我对 AngularJS 和 Node 完全陌生。）
找出这一点的一种方法是逐个添加解决您看到的错误所需的文件（或者如果是小目录，也可以按目录添加）。可能令人沮丧，因为在所有错误消失之前您不会知道需要多少文件，所以我不确定这是否是个好主意。只有最后的手段。
一个构建工具，例如gradle 可以为你提供 skip_files 功能...