ES2015 (आम तौर पर ES6), JavaScript भाषा के लिए एक बेहतरीन और मज़ेदार कदम है. इसमें ऐसे पैटर्न के लिए नई सुविधाएं और शुगर को शामिल किया गया है जिनके लिए ES5 में बड़े बॉयलरप्लेट की ज़रूरत थी. इसमें क्लास, ऐरो फ़ंक्शन, और मॉड्यूल शामिल हैं. इस एपिसोड में, हमने JavaScript वेब-ऐप्लिकेशन बनाते समय ES2015 का पूरा फ़ायदा उठाने के लिए इस्तेमाल किए जाने वाले टूल के बारे में बताया है.
बेबल के साथ ट्रांसपिलेशन
हालांकि, JavaScript इंजन स्थानीय तौर पर ES2015 की सुविधाओं को लागू करने की दिशा में काफ़ी बेहतर कर रहे हैं, लेकिन एक तरीका है. आज ही सुविधाओं के पूरे सेट का इस्तेमाल करने के लिए, आपको अपने कोड को वापस ES5 में ट्रांसपाइल करना होगा, ताकि मौजूदा ब्राउज़र उसे समझ सकें. शुक्र है कि बेबल जैसे टूल मौजूद हैं, जो इस प्रोसेस को बेहद आसान बना देते हैं.
अपनी बिल्ड प्रोसेस में बेबल का इस्तेमाल करना
Babel आपको ES2015 की सुविधाओं का इस्तेमाल करके, JavaScript लिखने और उसे वापस ES5 में ट्रांसपाइल करने देता है. इससे यह उन ब्राउज़र में काम कर सकेगा जिन पर फ़िलहाल ये सुविधाएं काम नहीं करतीं. अपनी बिल्ड प्रोसेस में बेबल को जोड़ने का काम भी इस तरह ही किया जा सकता है.
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'));
});
एक ऐसी सुविधा है जिसे Shorts ट्रांसपाइल नहीं कर सकता. वह मॉड्यूल है. ES6 के मॉड्यूल से आपको क्लास बनाने और फ़ाइलों के बीच क्लास एक्सपोर्ट / इंपोर्ट करने की सुविधा मिलती है. मॉड्यूल को ट्रांसपाइल करने के लिए Browserify से अपनी JavaScript पास करें, जो फ़ाइलों को मर्ज कर देगा और फिर इसे 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/'));
});
एक से ज़्यादा JavaScript फ़ाइलें
ऊपर दिए गए उदाहरण में, आपको एक खास फ़ाइल सेट करनी होगी, जो बहुत मुश्किल हो सकती है. मैट, .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();
});
लिंटिंग और स्टाइल की जांच
संभावित समस्याओं और स्टाइल का पालन करने के लिए, अपने कोड को लिंटिंग करने के कुछ विकल्प मौजूद हैं.
JSJS और JSCS
JSHint और JSCS, आज की JavaScript स्टाइल-चेकिंग के लिए इस्तेमाल किए जाने वाले सबसे आम टूल हैं.
JSHint आपके कोड में किसी भी संभावित समस्या को हाइलाइट करेगा और साथ ही ऐसे किसी भी पैटर्न की जानकारी देगा जिसे आम तौर पर गलत माना जाता है.
JSCS आपके कोड की स्टाइल पर गौर करेगा. इसमें यह पक्का करना शामिल है कि सिर्फ़ टैब या स्पेस का इस्तेमाल किया जाए और स्पेस को एक ही जगह पर रखा गया हो.
ES2015 कोड पर JSआम और JSCS का इस्तेमाल करने के लिए, आपको अपनी .jshintrc और .jscsrc फ़ाइलों में "esnext": true को जोड़ना होगा
ESLint
ESLint एक वैकल्पिक लिंटर और स्टाइल चेकर है. यह टूल बहुत अच्छा काम कर रहा है और इसमें JSJS की कुछ अच्छी सुविधाएं हैं. उदाहरण के लिए, यह उन जगहों के बारे में बता सकता है जिनके लिए आपका 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-estlint. यह एक ऐसा टूल है जिससे आप ESLint का इस्तेमाल करके किसी भी मान्य Nearby कोड को लिंट कर सकते हैं. हालांकि, ESLint
कस्टम पार्सर के साथ काम करता है, लेकिन Babel के साथ काम करने वाले कुछ सिंटैक्स, सीधे तौर पर ESLint पर काम नहीं करते. इसलिए, अगर आपको ज़्यादा लचीलेपन की ज़रूरत है,
तो यह एक दूसरा विकल्प है. अपनी .eslintrc फ़ाइल के parser सेक्शन को पसंद के मुताबिक बनाकर, इसे सेट अप किया जा सकता है:
{
"parser": "babel-eslint",
"rules": {
"strict": 0
}
}
Lint like It's 2015 में ESLint और babel-eslint को सेट अप करने के बारे में डैन अब्रामोव ने शानदार लेख लिखे हैं. इसमें यह भी बताया गया है कि सबलाइम टेक्स्ट में ES2015 की लिंटिंग सहायता के लिए, SublimeLinter-eslint को अपने वर्कफ़्लो में कैसे इंटिग्रेट किया जाए.
आपको किसका इस्तेमाल करना चाहिए? इन्हें आज़माएं और इनके साथ बने रहें.
ES2015 सिंटैक्स हाइलाइटिंग
आपको ES2015 कोड को सही तरीके से हाइलाइट करने की ज़रूरत होगी. हमें babel-sublime को इस्तेमाल करने में आनंद आता है. इसे पैकेज कंट्रोल से इंस्टॉल किया जा सकता है. सेट अप करते समय, हम यह पक्का करने का सुझाव देते हैं कि आप इसे उन सभी फ़ाइलों के लिए डिफ़ॉल्ट के तौर पर सेट करें जिनपर आपको काम करने के लिए हाइलाइट करने की ज़रूरत है. इसमें JS ज़रूर शामिल होगा, लेकिन अगर प्रतिक्रिया का इस्तेमाल किया जा रहा है, तो JSX को भी कवर किया जा सकता है.
ES2015 का दस्तावेज़ बनाना
अपने JavaScript कोड को प्रोसेस करने के लिए, हम पहले से ही JSDoc पर बहुत ज़्यादा भरोसा करते रहे हैं. माफ़ करें, ES2015 के साथ काम करने से जुड़ी इसमें खुली समस्याएं हैं (JSDoc 3 में इस समस्या का समाधान किया गया है). हालांकि, इस दौरान कई विकल्प उपलब्ध हैं, क्योंकि हम समस्या के ठीक होने का इंतज़ार कर रहे हैं. ESDoc एक ऐसा ही विकल्प है और जॉनाथन क्रीमर ने इस पर हाल ही का राइट-अप तैयार किया है.
बेबल के साथ Gulp.js फ़ाइलें बनाना
अगर आप अपनी बिल्ड प्रोसेस के लिए Gulp का इस्तेमाल कर रहे हैं, तो Gulpfiles को अब ऐसे किसी भी सिंटैक्स का इस्तेमाल करके लिखा जा सकता है जो Gboard पर काम करता है. हम इसे Web Starter
किट में करते हैं और इसे सेटअप करना आसान है. Gulp और Gulp CLI के हाल ही के वर्शन का इस्तेमाल करके, बस अपने gulpfile.js का नाम बदलकर gulpfile.babel.js करें और Gulp अपने आप बेबल का इस्तेमाल करके आपकी ES2015 की गल्पफ़ाइल को समझेगा और उसे ट्रांसपाइल कर देगा.
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!"
टेंप्लेट स्ट्रिंग के साथ सबसे अच्छी बात यह है कि बदलाव एक JavaScript एक्ज़ीक्यूशन है. इसका मतलब है कि इसमें फ़ंक्शन या इनलाइन एक्सप्रेशन का इस्तेमाल किया जा सकता है.
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.
ज़्यादा जानकारी के लिए, Addy की यह ब्लॉग पोस्ट पढ़ें.
शॉर्टहैंड ऑब्जेक्ट लिटरल
अगर वैरिएबल का नाम और ऑब्जेक्ट का नाम एक ही है, तो ऑब्जेक्ट बनाते समय ऑब्जेक्ट लिटरल की मदद से, कुंजी और वैल्यू तय करने से बचा जा सकता है.
इसका मतलब यह है:
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) को कॉल करना होगा या फिर = इस वैरिएबल को बनाने की ज़रूरत नहीं है.
ज़्यादा जानकारी के लिए लिंक
Addy's ES6 टूल रेपो
एडी, ES2015 टूल की एक सूची बनाने में व्यस्त है और अगर ऊपर दिए गए टूल आपके लिए सही नहीं हैं, तो हो सकता है कि आप Gulp के बजाय Grunt की जगह ग्रंट का इस्तेमाल कर रहे हों, तो शायद आपको उसका जवाब मिल गया हो.
https://github.com/addyosmani/es6-tools
ऊपर दिए गए अपडेट में, अन्य बेबल टूल के लिंक भी शामिल हैं. इनसे यूनिट टेस्टिंग के दौरान और इसके बाद भी मदद की जा सकती है.
पढ़ने के लिए किताबें
ES2015 के बारे में और जानने के लिए ऐसी दो किताबें हैं जिन्हें आप मुफ़्त में ऑनलाइन देख सकते हैं. ECMAscript 6 को समझना, जिसे निकोलस सी॰ ज़ैकस और एक्सप्लोरिंग ES6 को डॉ॰ ऐक्सिसल रॉशमायर ने लिखा है.
टावर ऑफ़ बेबल
अगर अपनी कमांड-लाइन में ES2015 की सुविधाओं के बारे में जानना है, तो tower-of-babel में ऐसी कई कसरतें उपलब्ध हैं जिनमें आपकी दिलचस्पी हो सकती है. वे सभी बेबेल का इस्तेमाल करते हुए आगे बढ़ते हैं.
अगर दिलचस्पी हो, तो अन्य संसाधन: