Question

我正在试图找出一种方法将我需要的所有内容从angular 2 node_modules文件夹编译成一个文件..当我的网站加载时，似乎有一些疯狂的http调用，肯定不是最佳或者建议的新的和改进的角度过程..

我不关心我自己的打字稿文件，因为我知道如何处理它们但你有什么方法来连接node_modules文件等？

Answer 1

如果您使用的是 SystemJS

1。 package.json ：将这些内容添加到devDependencies

"devDependencies": {
    "gulp": "^3.9.1",
    "systemjs-builder": "^0.15.16"
  }

2。执行npm install

3。在index.html的同一级别创建 gulpfile.js ，其中包含此内容

var gulp = require('gulp'),
  Builder = require('systemjs-builder');


gulp.task('bundle-angular-dependencies', function() {
  // optional constructor options
  // sets the baseURL and loads the configuration file
  var builder = new Builder('', 'systemjs.config.js');

  return builder
    .bundle('app/boot.js - [app/**/*.js]', 'path/to/put/angular.bundle.js', { minify: true})
    .then(function() {
      console.log('Build complete');
    })
    .catch(function(err) {
      console.log('Build error');
      console.log(err);
    });
});

4. 打开终端并转到项目目录。做gulp bundle-angular-dependencies

5。参考angular.bundle.js，index.html以下，system.js，system.config.js以上。

如果您有任何疑问，请与我们联系。

Answer 2

我已经阅读了关于这个的github讨论，据我所知，没有本地捆绑支持，但是我已经创建了一个gulp任务，可以让你获得3/4的路径。

如果您使用的是SystemJS，则可以使用systemjs-builder包将所有角度2的依赖项捆绑到一个文件中。这个文件出现在大约95k，这是非常合理的;正如您可能猜到的那样，加载时间显着下降（<1s）。请注意，Angular仍会尝试拉出您在system-config文件中定义的自定义程序包（例如lodash / underscore），因此我最终只是将这些模块复制到/ dist文件夹中并使用另一个gulp任务（尽管您可以手动执行此操作你只是捆绑生产。）

这是一个项目本身，如果你在angular-cli出现之前启动你的项目，你可能需要对文件进行大量重组以满足其标准目录结构。

捆绑gulp任务的基本要点是：https://gist.github.com/stewhouston/27cac18c64d03b14de8b39389cbaa1c5。我还有其他几个在捆绑过程中使用的gulp任务，如果你愿意，可以粘贴它们，但是如果你不能自己编写它们，那么捆绑过程将非常难以忍受。

希望有角度的2团队很快就会发布一个本地捆绑包，这一切都是不必要的。

将Angular 2 node_modules文件编译为一个文件

2 个答案: