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

Question

我正在尝试运行Angular 2 种子应用程序.不幸的是,npm install放置了大量的文件node_modules,我认为我还必须与种子应用程序代码一起提供服务.

如果我只需要一些用于应用程序的工作,我不想要提供所有这些静态文件.有没有办法只服务我真正需要的那些？

我问的原因是因为Google App Engine开发环境(dev_appserver.py)对其可以提供的文件数量设置了限制,并且生产环境对可以上载的文件的总大小有限制.上传兆字节的不必要文件会很惭愧.

Answer 1

在生产中使用lib的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>

这不仅可以节省您处理什么以及如何将库移动到您的可分发中的麻烦,而且如果最终用户从之前访问过的网页下载了它们,它们也会节省一些时间.

Answer 2

这是由这个种子项目的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文件夹将包含您必须部署的内容.