将Angular 2 node_modules文件编译为一个文件 [英] Compile Angular 2 node_modules files into one file

问题描述

我正在尝试找到一种方法，将需要的所有内容从角度2的node_modules文件夹编译到一个文件中.似乎在加载网站时会有大量的http调用，这肯定不是最佳选择，或者推荐的新的和改进的角钢工艺.

I am trying to figure out a way to compile everything I need from the angular 2 node_modules folder into one file.. It seems that there is a crazy amount of http calls when my site is loading and surely thats not optimal or the recommended process of the new and improved angular..

我不关心我自己的打字稿文件，因为我知道如何处理它们，但是将node_modules文件等串联起来的方法是什么?

Im not concerned with my own typescript files as i know how to handle them but what are your approaches to concatenating the node_modules files etc ?

推荐答案

如果您使用的是 SystemJS

1.. package.json :将它们添加到devDependencies

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

2.做npm install

3..在与index.html相同级别上创建 gulpfile.js ，并包含其中的内容

3. create gulpfile.js at the same level of index.html, with this content in it

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

4. open terminal and go to the directory of your project. do gulp bundle-angular-dependencies

5..在index.html中引用angular.bundle.js，在system.js以下但在system.config.js以上.

5. Reference angular.bundle.js in your index.html, below system.js but above system.config.js.

如有任何疑问，请告诉我.

这篇关于将Angular 2 node_modules文件编译为一个文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！