ES2015

ES2015 (به طور رسمی ES6) یک گام فوق العاده به جلو برای زبان جاوا اسکریپت است. این ویژگی های جدید و شکرگذاری را برای الگوهایی به ارمغان می آورد که به دیگ بخار قابل توجهی در ES5 نیاز داشتند. این شامل کلاس ها، توابع پیکان و ماژول ها می شود. در این قسمت، ابزارهایی را که برای استفاده کامل از ES2015 هنگام ساخت برنامه های وب جاوا اسکریپت استفاده می کنیم، پوشش می دهیم.

انتقال با بابل

اگرچه موتورهای جاوا اسکریپت در پیاده سازی ویژگی های ES2015 به صورت بومی پیشرفت زیادی می کنند، اما یک مشکل وجود دارد. برای استفاده از مجموعه کاملی از ویژگی های امروز، باید کد خود را به ES5 برگردانید تا بتوان آن را توسط مرورگرهای فعلی تفسیر کرد. خوشبختانه، ابزارهایی مانند Babel وجود دارد که این فرآیند را بدون درد می کند.

استفاده از Babel در فرآیند ساخت شما

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 (نسخه‌ای از Babel که می‌تواند خروجی 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/'));
});

چندین فایل جاوا اسکریپت

مثال بالا از شما می‌خواهد که یک فایل خاص را تعریف کنید، که ممکن است کمی سنگین شود، Matt برای جستجو و انتقال فایل‌هایی که با .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 به سبک کد شما نگاه می کند، این شامل مواردی مانند اطمینان از استفاده از زبانه ها یا فاصله ها و قرار دادن فضاها در مکان های ثابت است.

برای استفاده از JSHint و JSCS در کد ES2015، باید "esnext": true به فایل‌های .jshintrc و .jscsrc .

ESLint

ESLint یک لاینتر جایگزین و جستجوگر سبک در یک است. این ابزار بخار زیادی را جذب می‌کند و دارای برخی ویژگی‌های خوب در JSHint است، مانند اینکه می‌تواند محیط‌هایی را که جاوا اسکریپت شما برای آنها نوشته شده است نشان دهد و سطح خطا / هشدار را برای مشکلات خاص تنظیم کند.

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 را حفظ می کند، ابزاری که به شما امکان می دهد هر کد معتبر Babel را با استفاده از ESLint پر کنید. در حالی که ESLint از تجزیه کننده های سفارشی پشتیبانی می کند، برخی از نحو پشتیبانی شده توسط Babel مستقیماً توسط ESLint پشتیبانی نمی شود، بنابراین اگر به انعطاف پذیری بیشتری نیاز دارید، گزینه دیگری است. این را می توان با سفارشی کردن بخش parser فایل .eslintrc خود تنظیم کرد:

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

دن آبراموف در مورد راه اندازی ESLint و babel-eslint در Lint Like It's 2015 نوشته بسیار خوبی دارد. همچنین نحوه ادغام SublimeLinter-eslint را در جریان کاری خود برای پشتیبانی ES2015 linting در Sublime Text پوشش می دهد.

کدام را باید استفاده کنید؟ آنها را امتحان کنید و از آنچه برای شما بهتر است استفاده کنید.

برجسته سازی نحو ES2015

مطمئناً می خواهید کد ES2015 شما به درستی به صورت نحوی برجسته شود. ما از استفاده از babel-sublime لذت می بریم که می تواند از Package Control نصب شود. هنگام راه‌اندازی، توصیه می‌کنیم حتماً آن را به‌عنوان پیش‌فرض برای هر فایلی که برای کار با آن‌ها نیاز به برجسته‌سازی دارید، تنظیم کنید. این البته شامل JS می‌شود اما در صورت استفاده از React ممکن است JSX را نیز پوشش دهد.

مستندسازی ES2015

ما از لحاظ تاریخی به شدت به JSDoc برای مستندسازی کد جاوا اسکریپت خود متکی بوده ایم. متأسفانه، مشکلاتی برای پشتیبانی از ES2015 دارد (با توجه به اینکه در JSDoc 3 به آن پرداخته می‌شود)، با این حال تعداد فزاینده‌ای از گزینه‌های جایگزین در دسترس است در حالی که منتظر می‌شویم تا به نتیجه برسد. ESDoc یکی از این گزینه‌ها است و جاناتان کرمر اخیراً نوشته‌ای درباره آن دارد که ارزش خواندن دارد.

نوشتن فایل های Gulp.js با Babel

اگر از Gulp برای فرآیند ساخت خود استفاده می کنید، Gulpfiles اکنون می تواند با استفاده از هر نحوی که توسط Babel پشتیبانی می شود، ایجاد شود. ما این کار را در Web Starter Kit انجام می دهیم و راه اندازی آن نسبتاً بی اهمیت است. با استفاده از نسخه اخیر Gulp و Gulp CLI، به سادگی نام gulpfile.js خود را به gulpfile.babel.js تغییر دهید و Gulp فایل ES2015 شما را با استفاده از Babel به صورت خودکار تفسیر و ترجمه می کند.

ویژگی های مورد علاقه 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.

می توانید از این پست وبلاگ مفید توسط Addy اطلاعات بیشتری کسب کنید.

حروف مخفف شیء

حروف الفبای شی به شما امکان می دهد هنگام ایجاد یک شی، از تعریف کلید و مقدار خودداری کنید، اگر نام متغیری با کلیدی که می خواهید شی داشته باشد، یکسان است.

به این معنی:

function createObject(name, data) {
  return { name: name, data: data };
}

این می شود:

function createObject(name, data) {
  return { name, data };
}

اسامی اموال محاسبه شده

این ویژگی در ES2015 به شما این امکان را می دهد که نام ویژگی ها را به صورت پویا روی یک شی ایجاد کنید. اسناد موزیلا منبع عالی اطلاعات است و این نمونه عالی را دارد .

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 وجود دارد.

Addy's ES6 Tools Repo

Addy مشغول نگه‌داشتن فهرستی از ابزارهای ES2015 بوده است و اگر ابزارهای بالا برای شما مناسب نیستند، شاید شما از Grunt به جای Gulp استفاده می‌کنید، پس این ممکن است پاسخی برای شما داشته باشد.

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

موارد بالا همچنین شامل پیوندهایی به ابزار Babel اضافی است که می تواند در طول آزمایش واحد و فراتر از آن کمک کند.

کتاب هایی برای خواندن

برای کسب اطلاعات بیشتر در مورد ES2015، دو کتاب وجود دارد که می توانید به صورت آنلاین به صورت رایگان بررسی کنید. درک ECMAScript 6 نوشته Nicholas C. Zakas و Exploring ES6 نوشته دکتر Axel Rauschmayer.

برج بابل

اگر علاقه مند به یادگیری ویژگی های ES2015 در خط فرمان خود هستید، tower-of-babel یک سری تمرینات را ارائه می دهد که ممکن است جالب باشد. همه آنها با استفاده از بابل راه می روند.

سایر منابع در صورت علاقه: