Canlı bir web sunucusunda üretim için Angular'ı (sürüm 2, 4, 6, ...) paketlemek için en iyi yöntem nedir?
Daha sonraki sürümlere geçtiğinde daha iyi takip edebilmemiz için lütfen cevaplara Angular sürümünü ekleyin.
2.x, 4.x, 5.x, 6.x, 7.x, 8.x
(TypeScript)npm install -g @angular/cli
ng new projectFolder
yeni bir uygulama oluştururng build --prod
(dizin projectFolder
olduğunda komut satırında çalıştırılır)
Üretim için prod
paketi bayrağı (üretim bayrağına dahil olan seçeneklerin listesi için Angular belgelerine bakın).
Aşağıdaki komutu kullanarak kaynakları Brotli compression kullanarak sıkıştırın
for i in dist/*; do brotli $i; done
demetler varsayılan olarak projectFolder/dist(/$projectFolder for 6) adresinde oluşturulur
Angular 8.2.11
ile CLI 8.3.13
ve Angular yönlendirmesi olmadan CSS seçeneği ile boyutlandırılır
dist/polyfill-[es-version].[hash].bundle.js
polyfill bağımlılıkları (@angular, RxJS...) paketlenmiş [ ES5 boyutu: Yeni Angular CLI uygulaması için 122 KB boş, 36 KB sıkıştırılmış].dist/index.html
giriş noktası.dist/runtime-[es-version].[hash].bundle.js
webpack yükleyicisidist/style.[hash].bundle.css
stil tanımlarıdist/assets
kaynaklarıYerel bir HTTP sunucusu başlatan ng serve --prod
komutunu kullanarak uygulamanızın bir önizlemesini alabilirsiniz, böylece üretim dosyalarının bulunduğu uygulamaya http://localhost:4200 adresinden erişilebilir.
Bir üretim kullanımı için, dist
klasöründeki tüm dosyaları seçtiğiniz HTTP sunucusuna dağıtmanız gerekir.
2.0.1 Final
(TypeScript - Hedef: ES5)npm install
(direcory projectFolder olduğunda cmd'de çalıştırın)npm run bundle
(direcory projectFolder olduğunda cmd içinde çalıştır)demetler projectFolder / bundles / için oluşturulur
bundles/dependencies.bundle.js
[ size: ~ 1 MB (mümkün olduğunca küçük) ]bundles/app.bundle.js
[ boyut: projenize bağlıdır, benimki ~ 0,5 MB]var gulp = require('gulp'),
tsc = require('gulp-typescript'),
Builder = require('systemjs-builder'),
inlineNg2Template = require('gulp-inline-ng2-template');
gulp.task('bundle', ['bundle-app', 'bundle-dependencies'], function(){});
gulp.task('inline-templates', function () {
return gulp.src('app/**/*.ts')
.pipe(inlineNg2Template({ useRelativePaths: true, indent: 0, removeLineBreaks: true}))
.pipe(tsc({
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"noImplicitAny": false
}))
.pipe(gulp.dest('dist/app'));
});
gulp.task('bundle-app', ['inline-templates'], function() {
// optional constructor options
// sets the baseURL and loads the configuration file
var builder = new Builder('', 'dist-systemjs.config.js');
return builder
.bundle('dist/app/**/* - [@angular/**/*.js] - [rxjs/**/*.js]', 'bundles/app.bundle.js', { minify: true})
.then(function() {
console.log('Build complete');
})
.catch(function(err) {
console.log('Build error');
console.log(err);
});
});
gulp.task('bundle-dependencies', ['inline-templates'], function() {
// optional constructor options
// sets the baseURL and loads the configuration file
var builder = new Builder('', 'dist-systemjs.config.js');
return builder
.bundle('dist/app/**/*.js - [dist/app/**/*.js]', 'bundles/dependencies.bundle.js', { minify: true})
.then(function() {
console.log('Build complete');
})
.catch(function(err) {
console.log('Build error');
console.log(err);
});
});
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
***
"gulp": "gulp",
"rimraf": "rimraf",
"bundle": "gulp bundle",
"postbundle": "rimraf dist"
},
"license": "ISC",
"dependencies": {
***
},
"devDependencies": {
"rimraf": "^2.5.2",
"gulp": "^3.9.1",
"gulp-typescript": "2.13.6",
"gulp-inline-ng2-template": "2.0.1",
"systemjs-builder": "^0.15.16"
}
}
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app',
'rxjs': 'node_modules/rxjs',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'@angular': 'node_modules/@angular'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'app/boot.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' }
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/forms',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
map: map,
packages: packages
};
// filterSystemConfig - index.asp's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
var map = {
'app': 'dist/app',
};
dist-systemjs.config.js
etiketini yerleştirmek yine de programın çalışmasına izin verir ancak bağımlılık paketi göz ardı edilir ve bağımlılıklar node_modules
klasöründen yüklenir.*<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<base href="/"/>
<title>Angular</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<my-app>
loading...
</my-app>
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.min.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="dist-systemjs.config.js"></script>
<!-- Project Bundles. Note that these have to be loaded AFTER the systemjs.config script -->
<script src="bundles/dependencies.bundle.js"></script>
<script src="bundles/app.bundle.js"></script>
<script>
System.import('app/boot').catch(function (err) {
console.error(err);
});
</script>
</body>
</html>
Şimdiye kadar yapabildiğimin en iyisi :)
Angular.io'nun hızlı başlangıç öğreticisi var. Bu öğreticiyi kopyaladım ve her şeyi sunucuya kopyalanabilen ve aynı şekilde çalışabilen dist klasörüne paketlemek için bazı basit gulp görevleriyle genişlettim. Her şeyi Jenkis CI üzerinde iyi çalışacak şekilde optimize etmeye çalıştım, böylece node_modules önbelleğe alınabilir ve kopyalanması gerekmez.
Github'da örnek uygulama içeren kaynak kodu: https://github.com/Anjmao/angular2-production-workflow
Node: Her zaman kendi derleme sürecinizi oluşturabilirsiniz, ancak angular-cli kullanmanızı şiddetle tavsiye ederim, çünkü gerekli tüm iş akışlarına sahip ve şu anda mükemmel çalışıyor. Zaten üretimde kullanıyoruz ve angular-cli ile ilgili herhangi bir sorun yaşamıyoruz.