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

问题描述

我试图找出一种方法将我需要的所有内容从 angular 2 node_modules 文件夹编译到一个文件中.. 似乎在我的网站加载时有大量的 http 调用，而且肯定不是最佳的或新的和改进的angular的推荐过程..

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. 打开终端并转到您的项目目录.do 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屋！