이 수준에서 이해해야 할 핵심 사항은 다음 구성을 사용하면 컴파일 된 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 파일에는 익명 모듈이 포함됩니다. 익명 모듈은 System.register모듈 이름을 첫 번째 매개 변수로 사용 하지만 사용 하지 않는 JS 파일입니다 . 이것은 typescript 컴파일러가 systemjs가 모듈 관리자로 구성 될 때 기본적으로 생성하는 것입니다.
따라서 모든 모듈을 단일 JS 파일로 만들 outFile려면 TypeScript 컴파일러 구성 내 에서 속성 을 활용해야 합니다.
이를 위해 gulp 내부에서 다음을 사용할 수 있습니다.
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 파일을 uglify하려면
app.js파일 을 만들려면vendor.js타사 라이브러리 용 파일 을 만들려면boot.js응용 프로그램을 부트 스트랩하는 모듈을 가져올 파일 을 만듭니다 . 이 파일은 페이지 끝에 포함되어야합니다 (모든 페이지가로드 될 때).index.html이 두 파일을 고려 하여 업데이트하려면
gulp 작업에는 다음 종속성이 사용됩니다.
- 꿀꺽 꿀꺽
- gulp-html-replace
- 꿀꺽 꿀꺽 타이프 스크립트
- 꿀꺽 꿀꺽 마시다
다음은 적용 할 수있는 샘플입니다.
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 축소를 처리하는 방법을 설명하지 않습니다.