इस स्तर पर समझने वाली महत्वपूर्ण बात यह है कि निम्नलिखित कॉन्फ़िगरेशन का उपयोग करके, आप सीधे संकलित जेएस फाइलों को समाप्त नहीं कर सकते हैं।
टाइपस्क्रिप्ट कंपाइलर कॉन्फ़िगरेशन में:
{
"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पहले पैरामीटर के रूप में मॉड्यूल नाम के बिना उपयोग करता है । यह तब होता है जब टाइपस्टेप कंपाइलर डिफ़ॉल्ट रूप से उत्पन्न होता है जब सिस्टमज को मॉड्यूल मैनेजर के रूप में कॉन्फ़िगर किया जाता है।
तो अपने सभी मॉड्यूल को एक सिंगल जेएस फ़ाइल में रखने के लिए, आपको outFileअपने टाइपस्क्रिप्ट कंपाइलर कॉन्फ़िगरेशन के भीतर संपत्ति का लाभ उठाने की आवश्यकता है ।
आप ऐसा करने के लिए निम्न अंदर 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'));
});
इसे कुछ अन्य प्रसंस्करण के साथ जोड़ा जा सकता है:
- चीजों को संकलित करने के लिए संकलित टाइपस्क्रिप्ट फाइलें
- एक
app.jsफ़ाइल बनाने के लिए
vendor.jsतीसरे पक्ष के पुस्तकालयों के लिए एक फ़ाइल बनाने के लिएboot.jsएप्लिकेशन को बूट करने वाले मॉड्यूल को आयात करने के लिए एक फ़ाइल बनाने के लिए। इस फ़ाइल को पृष्ठ के अंत में शामिल किया जाना चाहिए (जब सभी पृष्ठ लोड किया जाता है)।- अद्यतन करने के लिए
index.htmlखाते में इन दो फ़ाइलों लेने के लिए
निम्न निर्भरताएँ गल्प कार्यों में उपयोग की जाती हैं:
- घूंट-concat
- घूंट एचटीएम्एल की जगह
- घूंट-टाइपप्रति
- घूंट-रूप बिगाड़ना
निम्नलिखित एक नमूना है इसलिए इसे अनुकूलित किया जा सकता है।
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 मिनिफिकेशन को संभालने का तरीका नहीं बताता हूँ।