我已经使用 Angular 开发了一段时间,但我刚刚开始使用 Angular 2,在完成 Angular 2 教程的快速入门后,y 想到了尝试在服务器中开发完成的应用程序,就像在生产模式下一样。
我没有使用SystemJS或Gulp的经验,所以我花了一段时间,但我终于设法让它工作了。现在我有 2 个问题:
对于 Hello World 应用程序,它真的很重,大约 20MB,因为我不得不从 Angular 2 库中下载大量文件。我的猜测是我真的不需要那么多,但是尽管我只从 @angular/core 和 @angular/platform-browser-dynamic 开始,它们是我的应用程序 ts 文件中引用的那些,但 angular 在部署中不断抛出错误消息,直到我包含整个@angular库。
另一方面,当我运行应用程序时,我再次看到许多单个文件正在下载,这不是我的想法。必须有一种方法可以只下载一个包含所有库(捆绑包)的(缩小)文件,但我不知道该怎么做。
谁能帮我一把?
这是我的主要配置文件。
系统配置.js
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'@angular': 'lib/@angular',
'rxjs': 'lib/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' }
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic'
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Add package entries for angular packages
ngPackageNames.forEach(packIndex);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
索引.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="./css/styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="lib/shim.min.js"></script>
<script src="lib/zone.js"></script>
<script src="lib/Reflect.js"></script>
<script src="lib/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
古尔普文件.js
var gulp = require('gulp');
var ts = require('gulp-typescript');
const babel = require('gulp-babel');
var tsProject = ts.createProject('tsconfig.json');
gulp.task('babel-dp', ['resources', 'babel']);
gulp.task('ts-dp', ['resources', 'ts']);
gulp.task('resources', () => {
gulp.src([
'node_modules/core-js/client/shim.min.js',
'node_modules/zone.js/dist/zone.js',
'node_modules/reflect-metadata/Reflect.js',
'node_modules/systemjs/dist/system.src.js'
]).pipe(gulp.dest('web/lib'));
gulp.src([
'node_modules/@angular/**/*',
]).pipe(gulp.dest('web/lib/@angular'));
gulp.src([
'node_modules/rxjs/**/*',
]).pipe(gulp.dest('web/lib/rxjs'));
gulp.src([
'app/**/*.js'
]).pipe(gulp.dest('web/app'));
gulp.src([
'styles.css'
]).pipe(gulp.dest('web/css'));
gulp.src([
'index.html',
'systemjs.config.js',
'favicon.ico'
]).pipe(gulp.dest('web'));
});
gulp.task('babel', () => {
return gulp.src([
'app/**/*.ts'
])
.pipe(babel({presets: ['es2015']}))
.pipe(gulp.dest('web/js'));
});
gulp.task('ts', function(done) {
var tsResult = tsProject.src([
'app/**/*.ts'
])
.pipe(ts(tsProject));
return tsResult.js.pipe(gulp.dest('web/js'));
});
如果您需要任何其他文件,请告诉我。非常感谢!
更新
我刚刚发现我可以在@angular中使用 umd.min.js 文件而不是单个 js 文件。这是从 20 到 5MB 的东西,但当 Angular 1 的缩小版本小于 1MB 时,似乎仍然很多。
另一方面,即使我使用了这些 umd.min.js 文件,chrome 在加载应用程序时仍在下载单个文件。
更新 2
我设法按照评论中的建议使用 systemjs-builder 创建了一个捆绑文件。现在我有一个文件包.app.js其中包含我的所有应用程序代码和索引.html现在看起来像这样
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="css/styles.css">
<!-- 1. Load libraries -->
<script src="app/bundle.app.js"> </script>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script>
System.import('app').catch(function(err) { console.error(err); });
</script>
</head>
<!-- 2. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
但是现在Chrome找不到在HTML中导入的JS:shim.min.js,zone.js,Reflect.js和system.src.js。我在systemjs.config中添加了一行.js以防万一node_modules,但我认为没有必要。无论如何,它也不起作用。这些导入不应该已经包含在捆绑包中吗?
好的,我终于得到了一个工作配置,所以我将在此处复制所需的所有文件,以防有人发现它有帮助。
索引.html
<html>
<head>
<title>Angular 2 QuickStart Deploy</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="css/styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="lib/shim.min.js"></script>
<script src="lib/zone.js"></script>
<script src="lib/Reflect.js"></script>
<script src="lib/system.src.js"></script>
</head>
<!-- 2. Display the application -->
<body>
<my-app>Loading...</my-app>
<!-- application bundle -->
<script src="app/bundle.app.js"></script>
</body>
</html>
古尔普文件.js
const gulp = require('gulp');
const ts = require('gulp-typescript');
const babel = require('gulp-babel');
const Builder = require('systemjs-builder');
// systemjs-builder
const builder = new Builder('.', 'systemjs.config.js');
// typescript transpiler
var tsProject = ts.createProject('tsconfig.json');
gulp.task('babel-dp', ['resources', 'babel']);
gulp.task('ts-dp', ['resources', 'ts']);
gulp.task('bundle:app', () => {
builder.buildStatic('app/*.js', 'web/app/bundle.app.js')
.then(function() {
console.log('Build complete');
})
.catch(function(err) {
console.log('error ' + err);
})
})
gulp.task('resources', () => {
gulp.src([
'node_modules/core-js/client/shim.min.js',
'node_modules/zone.js/dist/zone.js',
'node_modules/reflect-metadata/Reflect.js',
'node_modules/systemjs/dist/system.src.js'
]).pipe(gulp.dest('web/lib'));
gulp.src([
'styles.css'
]).pipe(gulp.dest('web/css'));
gulp.src([
'index.html',
'favicon.ico'
]).pipe(gulp.dest('web'));
});
gulp.task('babel', () => {
return gulp.src([
'app/**/*.ts'
])
.pipe(babel({presets: ['es2015']}))
.pipe(gulp.dest('web/js'));
});
gulp.task('ts', function(done) {
var tsResult = tsProject.src([
'app/**/*.ts'
])
.pipe(ts(tsProject));
//return tsResult.js.pipe(gulp.dest('web/js'));
return tsResult.js.pipe(gulp.dest('app/js'));
});
其余文件未更改。对我来说,这里的要点是使用 systemjs-builder 来创建捆绑包(感谢@Thorsten的提示)以及在索引.html中使用捆绑包。
至于将多个文件/库捆绑在单个文件中,您可以使用 gulp 任务。
这里有一些东西可以帮助您入门。一定要了解不同的线条是什么意思,可能会发生,你必须改变一些小块来反映你的需求。
const gulp = require('gulp');
const path = require('path');
const runSequence = require('run-sequence');
const paths = require('../paths');
gulp.task('bundle', cb => {
runSequence(
'bundle:app',
'bundle:vendor',
cb
);
});
const app = 'app/**/*.js';
const specs = 'app/**/*.spec.js';
gulp.task('bundle:app', () => {
const appModules = `[${app}] - [${specs}]`; // except specs
return bundle(appModules, paths.dst + '/bundle.app.js', { baseUrl: paths.dst });
});
gulp.task('bundle:vendor', () => {
// build app and remove the app code - this leaves only 3rd party dependencies
const dstApp = path.join(paths.dst, app);
const dstSpecs = path.join(paths.dst, specs);
const vendorModules = `${dstApp} - [${dstApp}]`;
return bundle(vendorModules, paths.dst + '/bundle.vendor.js');
});
function bundle(src, dst, opt) {
const bundleOptions = Object.assign({
baseUrl: '.',
minify: false,
sourceMaps: false,
lowResSourceMaps: false, // mapping granularity is per-line instead of per-character
}, opt);
const Builder = require('systemjs-builder');
const builder = new Builder(bundleOptions.baseUrl, paths.src + '/systemjs.config.js');
return builder.bundle(src, dst, bundleOptions);
}
缩小是额外的步骤,但大口大口地缩小或大口大口地丑化是值得一看的。