इस पेज का अनुवाद Cloud Translation API से किया गया है.

ES2015

ES2015 (आम तौर पर ES6) में बनाया है. यह नई सुविधाएं और इस्तेमाल करके देखें कि 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'));
});

बेबल एक ऐसी सुविधा है, जो मॉड्यूल को ट्रांसपाइल नहीं कर सकती. ES6 में मौजूद मॉड्यूल से आपको यह सुविधा मिलती है क्लास बनाएं और फ़ाइलों के बीच क्लास एक्सपोर्ट / इंपोर्ट करें. मॉड्यूल को ट्रांसपाइल करने के लिए अपनी JavaScript को माइग्रेट करें Browserify होता है, जो फ़ाइलें सेव की जा सकती हैं और फिर इसे Babelify से पास किया जा सकता है (Bबेल का ऐसा वर्शन जो Browserify के आउटपुट को हैंडल कर सकता है).

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 होता है.

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 सबसे आम हैं का इस्तेमाल किया जाता है.

JS संकेत आपके कोड में किसी भी संभावित समस्या को हाइलाइट करेगा और किसी भी समस्या को जिन्हें आम तौर पर खराब तरीका माना जाता है.

JSCS आपके कोड की स्टाइल देखेगा. इसमें, यह पक्का करने जैसे काम शामिल हैं सिर्फ़ टैब या स्पेस का इस्तेमाल किया जाता है और स्पेस को एक जैसी जगह पर रखा जाता है.

ES2015 कोड पर JShint और JSCS का इस्तेमाल करने के लिए, आपको "esnext": true को अपने .jshintrc और .jscsrc फ़ाइलें

ESLint

ESLint एक वैकल्पिक लिंटर और स्टाइल चेकर है. यह टूल बहुत सारी जानकारी इकट्ठा कर रहा है. साथ ही, इसमें JS थंबनेल की कुछ अच्छी सुविधाएं शामिल हैं जैसे कि उन परिवेशों को दिखा पाना जिनके लिए आपकी 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...
});

बेबेल टीम Beel-estlint को मैनेज करती है, एक ऐसा टूल जो आपको ESLint का इस्तेमाल करके किसी भी मान्य बेबेल कोड को लिंट करने देता है. जबकि ईएसएलंट कस्टम पार्सर का इस्तेमाल करता है, लेकिन बेबेल के साथ काम करने वाले कुछ सिंटैक्स सीधे तौर पर काम नहीं करते यह ESLint का इस्तेमाल करके काम करता है. अगर आपको इसका इस्तेमाल करना है, तो ज़रूरत के हिसाब से इस्तेमाल किया जा सकता है. इसे सेट अप करने के लिए, इसके parser सेक्शन को पसंद के मुताबिक बनाएं .eslintrc फ़ाइल:

{
  "parser": "babel-eslint",
  "rules": {
    "strict": 0
  }
}

डैन अब्रामोव ने लिंट में ईएसएलंट और बेबेल-एस्लिंट सेट अप करने के बारे में बहुत बढ़िया लिखा है लाइक इट इज़ 2015 में बताया गया है. यह भी में इंटिग्रेट करने का तरीका बताया गया है SublimeLinter-eslint में सबलाइम टेक्स्ट में ES2015 लिंटिंग सहायता के लिए आपका वर्कफ़्लो.

आपको इनमें से किसका इस्तेमाल करना चाहिए? इन्हें आज़माएं और इनमें से जो तरीका आपके लिए सबसे सही है, उसका इस्तेमाल करें.

ES2015 सिंटैक्स हाइलाइटिंग

आपको अपने ES2015 कोड को सही तरीके से सिंटैक्स हाइलाइट करना होगा. बुध bal-sublime का इस्तेमाल करना अच्छा रहेगा, जो इसे पैकेज कंट्रोल से इंस्टॉल किया जा सकता है. हमारा सुझाव है कि सेट अप करते समय, इसे किसी भी फ़ाइल के लिए डिफ़ॉल्ट के तौर पर सेट करें हाइलाइट करने की ज़रूरत है. इसमें JS ज़रूर शामिल होगा, लेकिन अगर React का इस्तेमाल किया जा रहा है, तो JSX को भी कवर किया जाएगा.

ES2015 का डॉक्यूमेंटिंग

अपने JavaScript कोड के दस्तावेज़ तैयार करने के लिए, हम हमेशा JSDoc पर निर्भर रहे हैं. हमें खेद है कि इसमें ES2015 के साथ काम करने के लिए ऐसी समस्याएं हैं जिनका समाधान JSDoc 3 में किया गया है. हालांकि, इसके आने तक कई विकल्प उपलब्ध हैं. ESDoc ऐसा ही एक विकल्प है और जोनाथन क्रीमर ने हाल ही में इस पर एक लिखा लिखा है. यह पढ़ने लायक है.

बेबल के साथ Gulp.js फ़ाइलें बनाना

अगर आपने बिल्ड प्रोसेस के लिए Gulp का इस्तेमाल किया है, तो Gulpfiles इसे बेबेल के साथ काम करने वाले किसी भी सिंटैक्स का इस्तेमाल करके लिखा गया है. हम वेब स्टार्टर में ऐसा करते हैं किट और इसे सेटअप करना भी बेहद आसान है. Gulp के हाल ही के वर्शन और Gulp CLI, अपने gulpfile.js का नाम बदलकर gulpfile.babel.js करें और Gulp बेबल का इस्तेमाल करके अपने ES2015 glpfile को अपने-आप समझें और ट्रांसपाइल करें.

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}!');

// =&gt; "Yo, Brendan!"

टेम्प्लेट स्ट्रिंग के साथ सबसे अच्छी बात यह है कि प्रतिस्थापन एक JavaScript है एक्ज़ीक्यूट किया जा सकता है. इसका मतलब है कि फ़ंक्शन या इनलाइन एक्सप्रेशन का इस्तेमाल किया जा सकता है.

var a = 10;
var b = 10;
console.log('a+b = ${a+b}.');
//=&gt; a+b = 20.

function fn() { return "I am a result. Rarr"; }
console.log('foo ${fn()} bar');
//=&gt; 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) को कॉल करने की ज़रूरत नहीं है या एक वैरिएबल बनाएं जो = यह हो.

इस पर और भी उदाहरण दिए गए हैं एमडीएन.

ज़्यादा जानकारी के लिए लिंक

Addy का ES6 टूल रेपो

ऐडी, ES2015 टूल की सूची बनाने में व्यस्त है. अगर ऊपर दिए गए टूल आपके लिए सही है, शायद आप गल्प की जगह ग्रंट का उपयोग कर रहे हैं, तो शायद आपका आपके लिए एक जवाब.

https://github.com/addyosmani/es6-tools

ऊपर दिए गए लिंक में अतिरिक्त बेबल टूल के लिंक भी शामिल हैं. इन लिंक से मदद मिल सकती है यूनिट टेस्टिंग के साथ-साथ और भी कई सुविधाएं मिलती हैं.

पढ़ने के लिए किताबें

ऐसी दो किताबें हैं जिन्हें मुफ़्त में ऑनलाइन देखा जा सकता है. यहां पर आप इन दो किताबों के बारे में ज़्यादा जान सकते हैं ES2015. ECMAScript 6 के बारे में जानकारी निकोलस सी॰ ज़ाका और ES6 को एक्सप्लोर करना लेखक डॉ॰ एक्सल रौशमायर.

टावर ऑफ़ बेबल

अगर आपको अपनी कमांड-लाइन में ES2015 की सुविधाएं सीखने में दिलचस्पी है, टावर-ऑफ़-बैबल सुझाव है, जो आपके काम आ सकता है. वे सभी कीवर्ड का इस्तेमाल करके, बेबल.

अगर आपकी दिलचस्पी है, तो अन्य संसाधन:

ES2015 संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.