এই স্তরে বোঝার মূল বিষয়টি হ'ল নিম্নলিখিত কনফিগারেশনটি ব্যবহার করে আপনি সরাসরি সংকলিত জেএস ফাইলগুলি কনটাক্ট করতে পারবেন না।
টাইপস্ক্রিপ্ট সংকলক কনফিগারেশনে:
{
"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"
]
}
এইচটিএমএলে
System.config({
packages: {
app: {
defaultExtension: 'js',
format: 'register'
}
}
});
প্রকৃতপক্ষে, এই জেএস ফাইলগুলিতে বেনামে মডিউল থাকবে। বেনামে মডিউলটি একটি জেএস ফাইল যা ব্যবহার করে System.registerতবে প্রথম প্যারামিটার হিসাবে মডিউলের নাম ছাড়াই। মডিউল ম্যানেজার হিসাবে কনফিগার করা যখন সিস্টেমজগুলি ডিফল্টরূপে টাইপস্ক্রিপ্ট সংকলক তৈরি করে।
সুতরাং আপনার সমস্ত মডিউলগুলি একটি একক জেএস ফাইলে রাখতে outFileআপনার টাইপস্ক্রিপ্ট সংকলক কনফিগারেশনের মধ্যে থাকা সম্পত্তিটি উত্তোলন করতে হবে ।
এটি করতে আপনি নীচের অভ্যন্তর ঝালটি ব্যবহার করতে পারেন:
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ফাইল থেকে নিবন্ধিত হওয়ার জন্য অপেক্ষা করতে অবশ্যই শরীরের শেষে করা উচিত ।
আমি সিএসএস এবং এইচটিএমএল মিনিফিকেশন পরিচালনা করার উপায়টি এখানে বর্ণনা করি না।