我刚刚使用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);
在https://github.com/angular/angular-cli上查看官方的angular-cli
它使用webpack 2,并且针对不同的环境具有不同的设置。开发构建时间相当快。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句