ES2015 (আনুষ্ঠানিকভাবে ES6) জাভাস্ক্রিপ্ট ভাষার জন্য একটি দুর্দান্ত পদক্ষেপ। এটি নতুন বৈশিষ্ট্য নিয়ে আসে এবং নিদর্শনগুলির জন্য সুগারিং করে যা ES5 এ উল্লেখযোগ্য বয়লারপ্লেটের প্রয়োজন ছিল। এর মধ্যে রয়েছে ক্লাস, অ্যারো ফাংশন এবং মডিউল। এই পর্বে, আমরা জাভাস্ক্রিপ্ট ওয়েব-অ্যাপস তৈরি করার সময় ES2015 এর সম্পূর্ণ সুবিধা নিতে ব্যবহার করা সরঞ্জামগুলি কভার করি।
বাবেলের সাথে ট্রান্সপিলেশন
যদিও জাভাস্ক্রিপ্ট ইঞ্জিনগুলি স্থানীয়ভাবে ES2015 বৈশিষ্ট্যগুলি বাস্তবায়নে দুর্দান্ত অগ্রগতি করছে, সেখানে একটি গোছা রয়েছে৷ আজকের বৈশিষ্ট্যগুলির সম্পূর্ণ সেট ব্যবহার করার জন্য, আপনাকে আপনার কোডটি ES5-এ ট্রান্সপিল করতে হবে যাতে এটি বর্তমান ব্রাউজারগুলির দ্বারা ব্যাখ্যা করা যায়। সৌভাগ্যক্রমে, বাবেলের মতো সরঞ্জাম বিদ্যমান যা এই প্রক্রিয়াটিকে ব্যথাহীন করে তোলে।
আপনার বিল্ড প্রক্রিয়ায় ব্যাবেল ব্যবহার করা
Babel আপনাকে ES2015 বৈশিষ্ট্যগুলি ব্যবহার করে লেখা জাভাস্ক্রিপ্ট নিতে দেয় এবং এটিকে ES5-এ ফেরত পাঠায় যাতে এটি এমন ব্রাউজারগুলিতে কাজ করতে পারে যেগুলি আজ এই বৈশিষ্ট্যগুলিকে সমর্থন করে না৷ আপনার বিল্ড প্রক্রিয়াতে Babel যোগ করা এভাবে করা যেতে পারে।
var gulp = require('gulp');
var babel = require('gulp-babel');
gulp.task('default', function () {
return gulp.src('src/app.js')
.pipe(babel())
.pipe(gulp.dest('dist'));
});
একটি বৈশিষ্ট্য যা ব্যাবেল ট্রান্সপিল করতে পারে না তা হল মডিউল। ES6-এর মডিউলগুলি আপনাকে ক্লাস তৈরি করতে এবং ফাইলগুলির মধ্যে রপ্তানি/আমদানি করার অনুমতি দেয়। মডিউল ট্রান্সপাইল করার জন্য আপনার জাভাস্ক্রিপ্টকে Browserify এর মাধ্যমে পাস করবে, যা ফাইলগুলিকে একত্রিত করবে এবং তারপর এটিকে Babelify এর মাধ্যমে পাস করবে (ব্যাবেলের একটি সংস্করণ যা ব্রাউজারফাই থেকে আউটপুট পরিচালনা করতে পারে)।
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
gulp.task('babelify', function() {
browserify({ entries: './src.js', debug: true })
.transform(babelify)
.bundle()
.pipe(source('bundle.js'))
.pipe(gulp.dest('./dist/js/'));
});
একাধিক জাভাস্ক্রিপ্ট ফাইল
উপরের উদাহরণের জন্য আপনাকে একটি নির্দিষ্ট ফাইল সংজ্ঞায়িত করতে হবে, যা কিছুটা বোঝা হয়ে যেতে পারে, ম্যাট .es6.js দিয়ে শেষ হওয়া ফাইলগুলি অনুসন্ধান এবং ট্রান্সপিল করার জন্য Gulp-এ নিম্নলিখিতগুলি করে৷
var config = {
src: 'src/scripts',
dest: 'dist/scripts'
};
var es6FileGlob = '/**/*.es6.js';
var gulp = require('gulp');
var plugins = require('gulp-load-plugins')();
var glob = require('glob');
var path = require('path');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
// Takes an array of bundles to run through browserify and babelify
function transpileES6Modules(browserifyFileEntries) {
browserifyFileEntries.forEach(function(fileEntry) {
var browserifyBundle = browserify({
entries: [fileEntry.srcPath]
})
.transform(babelify);
var finalStream = browserifyBundle.bundle()
.on('log', plugins.util.log.bind(plugins.util, 'Browserify Log'))
.on('error', plugins.util.log.bind(plugins.util, 'Browserify Error'))
.pipe(source(fileEntry.outputFilename));
return finalStream.pipe(gulp.dest(fileEntry.dest));
});
}
// This takes a source path and finds all files ending
// with .es6.js and creates the bundles to run through browserify
// and babelify
function handleES6Scripts(srcPath) {
var browserifyFileEntries = [];
var es6Filepaths = glob.sync(srcPath + es6FileGlob);
es6Filepaths.forEach(function(filepath) {
var filename = path.basename(filepath);
var directoryOfFile = path.dirname(filepath);
var relativeDirectory = path.relative(
srcPath,
directoryOfFile);
// Create an object and add to the browserify bundle array
browserifyFileEntries.push({
srcPath: './' + filepath,
outputFilename: filename,
dest: path.join(config.dest, relativeDirectory)
});
});
transpileES6Modules(browserifyFileEntries);
}
gulp.task('scripts:es6', ['scripts:lint'], function(cb) {
handleES6Scripts(config.src);
cb();
});
লিন্টিং এবং স্টাইল চেক
সম্ভাব্য সমস্যা এবং শৈলী সম্মতির জন্য আপনার কোড লিন্ট করার সময় কয়েকটি বিকল্প রয়েছে।
JSHint এবং JSCS
JSHint এবং JSCS হল আজকের জাভাস্ক্রিপ্ট স্টাইল-পরীক্ষার জন্য ব্যবহৃত সবচেয়ে সাধারণ টুল।
JSHint আপনার কোডে যেকোন সম্ভাব্য সমস্যা হাইলাইট করবে এবং সেইসাথে সাধারণভাবে খারাপ অভ্যাস হিসাবে বিবেচিত যেকোন প্যাটার্নগুলিকে কল করবে।
JSCS আপনার কোডের স্টাইল দেখবে, এতে শুধু ট্যাব বা স্পেস ব্যবহার করা হয়েছে এবং স্পেসগুলি সামঞ্জস্যপূর্ণ জায়গায় রাখা হয়েছে তা নিশ্চিত করার মতো বিষয়গুলি অন্তর্ভুক্ত রয়েছে।
ES2015 কোডে JSHint এবং JSCS ব্যবহার করতে আপনাকে "esnext": true আপনার .jshintrc এবং .jscsrc ফাইলে সত্য
ইএসলিন্ট
ESLint হল একটি বিকল্প লিন্টার এবং স্টাইল পরীক্ষক। এই টুলটি প্রচুর বাষ্প গ্রহণ করছে এবং JSHint-এ কিছু চমৎকার বৈশিষ্ট্য রয়েছে যেমন আপনার JavaScript যে পরিবেশের জন্য লেখা হয়েছে তা নির্দেশ করতে সক্ষম হওয়া এবং নির্দিষ্ট সমস্যার জন্য ত্রুটি/সতর্কতা স্তর সেট করা।
ESLint সম্পূর্ণরূপে কাস্টমাইজযোগ্য এবং কাস্টম লিন্টিং নিয়ম সরবরাহ করে যেখানে আপনি ড্রাইভারের আসনে আছেন বিকল্পগুলি এর কনফিগারেশন ফাইলগুলির মাধ্যমে সুইচ অফ বা টোন ডাউন করা যায় কিনা। উপরন্তু, আপনি যদি React ব্যবহার করেন, তাহলে ESLint JSX এর সাথেও কাজ করে।
আপনার বিল্ড প্রক্রিয়াতে ESLint সেট আপ করা খুব কঠিন নয়।
var gulp = require('gulp'),
eslint = require('gulp-eslint');
gulp.task('lint', function () {
return gulp.src(['js/**/*.js'])
// eslint() attaches the lint output to the eslint property
// of the file object so it can be used by other modules.
.pipe(eslint())
// eslint.format() outputs the lint results to the console.
// Alternatively use eslint.formatEach() (see Docs).
.pipe(eslint.format())
// To have the process exit with an error code (1) on
// lint error, return the stream and pipe to failOnError last.
.pipe(eslint.failOnError());
});
gulp.task('default', ['lint'], function () {
// This will only run if the lint task is successful...
});
Babel টিম babel-estlint বজায় রাখে, একটি টুল যা আপনাকে ESLint ব্যবহার করে কোনো বৈধ ব্যাবেল কোড লিন্ট করতে দেয়। যদিও ESLint কাস্টম পার্সার সমর্থন করে, Babel দ্বারা সমর্থিত কিছু সিনট্যাক্স সরাসরি ESLint দ্বারা সমর্থিত নয় তাই আপনার যদি আরও নমনীয়তার প্রয়োজন হয় তবে এটি অন্য বিকল্প। আপনার .eslintrc ফাইলের parser বিভাগটি কাস্টমাইজ করে এটি সেটআপ করা যেতে পারে:
{
"parser": "babel-eslint",
"rules": {
"strict": 0
}
}
Lint Like It's 2015- এ ESLint এবং babel-eslint সেট আপ করার বিষয়ে ড্যান আব্রামভের একটি চমৎকার লেখা রয়েছে। সাবলাইম টেক্সটে ES2015 লিন্টিং সাপোর্টের জন্য কীভাবে আপনার ওয়ার্কফ্লোতে SublimeLinter-eslint সংহত করবেন তাও এটি কভার করে।
আপনি কোনটি ব্যবহার করা উচিত? সেগুলি ব্যবহার করে দেখুন এবং আপনার জন্য সবচেয়ে ভাল কাজ করে সেই সাথে লেগে থাকুন।
ES2015 সিনট্যাক্স হাইলাইটিং
আপনি অবশ্যই আপনার ES2015 কোডটি সঠিকভাবে সিনট্যাক্স হাইলাইট করতে চাইবেন। আমরা ব্যাবেল-সাবলাইম ব্যবহার করে উপভোগ করি, যা প্যাকেজ কন্ট্রোল থেকে ইনস্টল করা যেতে পারে। সেট-আপ করার সময়, আমরা আপনাকে যে কোনো ফাইলের বিরুদ্ধে কাজ করার জন্য হাইলাইট করতে হবে তার জন্য এটিকে ডিফল্ট হিসেবে সেট করা নিশ্চিত করার পরামর্শ দিই। এটি অবশ্যই JS অন্তর্ভুক্ত করবে তবে প্রতিক্রিয়া ব্যবহার করলে JSXও কভার করতে পারে।
ডকুমেন্টিং ES2015
আমাদের জাভাস্ক্রিপ্ট কোড নথিভুক্ত করার জন্য আমরা ঐতিহাসিকভাবে JSDoc-এর উপর অনেক বেশি নির্ভর করেছি। দুর্ভাগ্যবশত, এটিতে ES2015 সমর্থন করার জন্য উন্মুক্ত সমস্যা রয়েছে (JSDoc 3 এ সম্বোধন করার কারণে), তবে আমরা এটি ধরার জন্য অপেক্ষা করার সময় বিকল্পগুলির একটি ক্রমবর্ধমান সংখ্যক উপলব্ধ রয়েছে। ESDoc হল এমন একটি বিকল্প এবং জোনাথন ক্রিমারের এটি পড়ার মতো একটি সাম্প্রতিক লেখা রয়েছে।
Babel এর সাথে Gulp.js ফাইল লেখা
আপনি যদি আপনার বিল্ড প্রক্রিয়ার জন্য Gulp ব্যবহার করছেন, তাহলে Gulpfiles এখন Babel দ্বারা সমর্থিত যেকোনো সিনট্যাক্স ব্যবহার করে রচিত হতে পারে। আমরা ওয়েব স্টার্টার কিটে এটি করি এবং এটি সেটআপের জন্য তুলনামূলকভাবে তুচ্ছ। Gulp এবং Gulp CLI-এর সাম্প্রতিক সংস্করণ ব্যবহার করে, আপনার gulpfile.js নাম পরিবর্তন করে gulpfile.babel.js করুন এবং Gulp স্বয়ংক্রিয়ভাবে Babel ব্যবহার করে আপনার ES2015 gulpfile ব্যাখ্যা করবে এবং স্থানান্তর করবে।
প্রিয় ES2015 বৈশিষ্ট্য
মডিউল
মডিউল হল একটি ফাইল থেকে মান, ফাংশন এবং ক্লাস রপ্তানি করার একটি উপায় যাতে আপনি সেগুলিকে অন্য ফাইলে আমদানি করতে পারেন।
export function exampleFunction() {
console.log('I\'m an example. #TrueStory');
}
import { exampleFunction } from './example-function';
import BaseController from './base-controller';
export default class ExampleController extends BaseController {
constructor() {
super();
exampleFunction();
}
doSomething() {
console.log('What should I do? Change the DOM? Print a dancing shark to the console?');
}
}
এই সাইটটিতে মডিউলগুলির কিছু দুর্দান্ত উদাহরণ এবং ব্যাখ্যা রয়েছে ।
টেমপ্লেট স্ট্রিংস
টেমপ্লেট স্ট্রিং আপনাকে একটি ভেরিয়েবল দিয়ে একটি স্ট্রিংয়ের একটি পোর্ট প্রতিস্থাপন করতে দেয়।
// Simple string substitution
var name = "Brendan";
console.log('Yo, ${name}!');
// => "Yo, Brendan!"
টেমপ্লেট স্ট্রিংগুলির সাথে চমৎকার জিনিসটি হল প্রতিস্থাপনটি একটি জাভাস্ক্রিপ্ট এক্সিকিউশন, যার অর্থ আপনি ফাংশন বা ইনলাইন এক্সপ্রেশন ব্যবহার করতে পারেন।
var a = 10;
var b = 10;
console.log('a+b = ${a+b}.');
//=> a+b = 20.
function fn() { return "I am a result. Rarr"; }
console.log('foo ${fn()} bar');
//=> foo I am a result. Rarr bar.
আপনি অ্যাডির এই সহজ ব্লগ পোস্ট থেকে আরও শিখতে পারেন।
শর্টহ্যান্ড অবজেক্ট লিটারাল
অবজেক্ট লিটারেলগুলি আপনাকে অবজেক্ট তৈরি করার সময় কী এবং মান নির্ধারণ করা এড়াতে দেয়, যদি ভেরিয়েবলের একই নাম থাকে যা আপনি অবজেক্টটিতে রাখতে চান।
এর অর্থ:
function createObject(name, data) {
return { name: name, data: data };
}
এটি হয়ে ওঠে:
function createObject(name, data) {
return { name, data };
}
গণনাকৃত সম্পত্তির নাম
ES2015-এর এই বৈশিষ্ট্যটি আপনাকে একটি বস্তুর উপর গতিশীলভাবে সম্পত্তির নাম তৈরি করতে দেয়। Mozilla ডক্স হল তথ্যের একটি বড় উৎস এবং এই মহান উদাহরণ রয়েছে ৷
var a = {
["foo" + ++i]: i,
["foo" + ++i]: i,
["foo" + ++i]: i
};
console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3
ফ্যাট তীর ফাংশন
ফ্যাট অ্যারো ফাংশন আপনাকে শর্টহ্যান্ডে ফাংশন লিখতে দেয় যেখানে এটি:
button.addEventListener('click', function(event) {
console.log('The button has received a click', event);
});
এটি হয়ে ওঠে:
button.addEventListener('click', (event) => {
console.log('The button has received a click', event);
});
একটি সংক্ষিপ্ত সিনট্যাক্স থাকার পাশাপাশি, ফ্যাট অ্যারো ফাংশন ব্যবহার করার একটি দুর্দান্ত বৈশিষ্ট্য হল যে অবজেক্টের স্কোপ একই এনক্লোসিং স্টেটমেন্ট। এর মানে হল যে আপনাকে আপনার ফাংশনে .bind(this) কল করতে হবে না বা একটি var তৈরি করতে হবে না যেটি = this।
MDN-এ আরও অনেক উদাহরণ রয়েছে।
আরও তথ্যের জন্য লিঙ্ক
অ্যাডির ES6 টুলস রেপো
Addy ES2015 সরঞ্জামগুলির একটি তালিকা রাখতে ব্যস্ত এবং যদি উপরের সরঞ্জামগুলি আপনার জন্য সঠিক না হয়, সম্ভবত আপনি Gulp এর পরিবর্তে Grunt ব্যবহার করছেন, তাহলে এটি আপনার জন্য একটি উত্তর থাকতে পারে।
https://github.com/addyosmani/es6-tools
উপরোক্ত অতিরিক্ত ব্যাবেল টুলিংয়ের লিঙ্কগুলিও অন্তর্ভুক্ত করে যা ইউনিট পরীক্ষার সময় এবং তার পরেও সাহায্য করতে পারে।
পড়ার জন্য বই
ES2015 সম্পর্কে আরও জানতে আপনি বিনামূল্যে অনলাইনে দুটি বই দেখতে পারেন। নিকোলাস সি. জাকাসের লেখা ECMAScript 6 এবং Dr. Axel Rauschmayer-এর লেখা Exploring ES6 বোঝা।
হট্টগোল এর টাওয়ার
আপনি যদি আপনার কমান্ড-লাইনে ES2015 বৈশিষ্ট্যগুলি শিখতে আগ্রহী হন, তাহলে টাওয়ার-অফ-বাবেল একাধিক ব্যায়াম অফার করে যা আগ্রহের হতে পারে। তারা সবাই বাবেল ব্যবহার করে চলাফেরা করে।
আগ্রহের ক্ষেত্রে অন্যান্য সংস্থান: