Ключове, що потрібно зрозуміти на цьому рівні, - це те, що, використовуючи наведену нижче конфігурацію, ви не можете сформулювати складені файли JS безпосередньо.
У конфігурації компілятора TypeScript:
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"declaration": false,
"stripInternal": true,
"module": "system",
"moduleResolution": "node",
"noEmitOnError": false,
"rootDir": ".",
"inlineSourceMap": true,
"inlineSources": true,
"target": "es5"
},
"exclude": [
"node_modules"
]
}
У HTML
System.config({
packages: {
app: {
defaultExtension: 'js',
format: 'register'
}
}
});
Власне, ці файли JS містять анонімні модулі. Анонімний модуль - це файл JS, який використовує, System.registerале без назви модуля, як перший параметр. Це те, що компілятор машинопису генерується за замовчуванням, коли systemjs налаштований як менеджер модулів.
Отже, щоб усі ваші модулі були в одному файлі JS, вам потрібно використовувати outFileвластивість у вашій конфігурації компілятора TypeScript.
Для цього ви можете скористатися такими внутрішніми глотками:
const gulp = require('gulp');
const ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json', {
typescript: require('typescript'),
outFile: 'app.js'
});
gulp.task('tscompile', function () {
var tsResult = gulp.src('./app/**/*.ts')
.pipe(ts(tsProject));
return tsResult.js.pipe(gulp.dest('./dist'));
});
Це може бути поєднано з деякою іншою обробкою:
- для зменшення речей компільовані файли TypeScript
- створити
app.jsфайл
- створити
vendor.jsфайл для сторонніх бібліотек
- створити
boot.jsфайл для імпорту модуля, що завантажує додаток. Цей файл повинен бути включений в кінці сторінки (коли всі сторінки завантажені).
- для оновлення,
index.htmlщоб врахувати ці два файли
Наступні залежності використовуються в задачах із глоткою:
- ковтнути-ламати
- gulp-html-substitute
- gulp-typecript
- ковтати-зливати
Далі наведено зразок, щоб його можна було адаптувати.
Створити app.min.jsфайл
gulp.task('app-bundle', function () {
var tsProject = ts.createProject('tsconfig.json', {
typescript: require('typescript'),
outFile: 'app.js'
});
var tsResult = gulp.src('app/**/*.ts')
.pipe(ts(tsProject));
return tsResult.js.pipe(concat('app.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
Створити vendors.min.jsфайл
gulp.task('vendor-bundle', function() {
gulp.src([
'node_modules/es6-shim/es6-shim.min.js',
'node_modules/systemjs/dist/system-polyfills.js',
'node_modules/angular2/bundles/angular2-polyfills.js',
'node_modules/systemjs/dist/system.src.js',
'node_modules/rxjs/bundles/Rx.js',
'node_modules/angular2/bundles/angular2.dev.js',
'node_modules/angular2/bundles/http.dev.js'
])
.pipe(concat('vendors.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
Створити boot.min.jsфайл
gulp.task('boot-bundle', function() {
gulp.src('config.prod.js')
.pipe(concat('boot.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
config.prod.jsПросто містить наступне:
System.import('boot')
.then(null, console.error.bind(console));
Оновіть index.htmlфайл
gulp.task('html', function() {
gulp.src('index.html')
.pipe(htmlreplace({
'vendor': 'vendors.min.js',
'app': 'app.min.js',
'boot': 'boot.min.js'
}))
.pipe(gulp.dest('dist'));
});
У index.htmlвиглядає наступним чином :
<html>
<head>
<!-- Some CSS -->
<!-- build:vendor -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<!-- endbuild -->
<!-- build:app -->
<script src="config.js"></script>
<!-- endbuild -->
</head>
<body>
<my-app>Loading...</my-app>
<!-- build:boot -->
<!-- endbuild -->
</body>
</html>
Зауважте, що це System.import('boot');потрібно зробити в кінці тіла, щоб зачекати, поки всі компоненти вашої програми будуть зареєстровані з app.min.jsфайлу.
Я не описую тут спосіб обробки CSS та HTML.