Question

我刚开始使用Angular 2的新应用程序。我只是按照angular.io快速启动程序构建它。该应用程序非常慢，经过一些研究，我发现了一些使用SystemJS + Gulp的解决方案。我做了一件非常像这个https://stackoverflow.com/a/37082199/3067873的东西，这对生产很好。它非常快。但另一方面，这对发展来说真的很糟糕。它太慢了（捆绑需要很长时间才能完成）。如果我不使用捆绑包也很慢（数百个请求）。我试图创建一个没有我的应用程序转换文件的捆绑，但它不起作用。

所以一个简短的问题是：设置开发环境的最佳方法是如何避免数百个请求并生成没有我的应用程序转换文件的捆绑包？或任何其他有助于我更有效地进行开发的想法/配置。

gulpfile.js

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

    var appDev = './app'; 
    var appProd = './app';

    gulp.task('bundle', function() {
        var builder = new Builder('', 'systemjs.config.js');

        return builder
            .buildStatic(appDev + '/main.js', appProd + '/bundle.js', { minify: true, sourceMaps: true})
            .then(function() {
                console.log('Build complete');
            })
            .catch(function(err) {
                console.log('Build error');
                    console.log(err);
                });
        });

    gulp.task('default', ['bundle']);

systemjs.config.js

    /**
     * System configuration for Angular samples
     * Adjust as necessary for your application needs.
     */
    (function (global) {
      System.config({
        paths: {
          // paths serve as alias
          'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
          // our app is within the app folder
          app: 'app',
          // angular bundles
          '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
          '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
          '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
          '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
          '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
          '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
          '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
          '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
          // other libraries
          'rxjs':                       'npm:rxjs',
          'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
          'primeng':                    'node_modules/primeng'
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
          app: {
            main: './main.js',
            defaultExtension: 'js'
          },
          rxjs: {
            defaultExtension: 'js'
          },
          'angular2-in-memory-web-api': {
            main: './index.js',
            defaultExtension: 'js'
          },
          primeng : { defaultExtension: 'js' }
        }
      });
    })(this);

Answer 1

查看https://github.com/angular/angular-cli

处的官方角度cli

它使用webpack 2，并针对不同的环境设置不同的设置。开发构建时间非常快。

Angular 2，在开发环境中非常慢（我需要开发包吗？）

1 个答案: