ES2015

ES2015 (المعروفة رسميًا باسم ES6) هي خطوة رائعة إلى الأمام في لغة JavaScript. تقدم ميزات تحديد الأنماط التي تتطلب نصًا نموذجيًا كبيرًا في ES5. هذا النمط الفئات ودوال الأسهم والوحدات. في هذه الحلقة، نتناول الأدوات نستخدمها للاستفادة الكاملة من ES2015 عند إنشاء تطبيقات ويب JavaScript.

الترجمة باستخدام Babel

وعلى الرغم من أن محركات JavaScript التقدم في تنفيذ ES2015 الميزات في الأصل، فهناك عقبة واحدة. لاستخدام مجموعة الميزات الكاملة اليوم، عليك تحويل الرمز إلى ES5 مرة أخرى تم تفسيره من خلال المتصفحات الحالية. لحسن الحظ، توجد أدوات مثل Babel التي تجعل هذه العملية بجانب "غير عناء".

استخدام Babel في عملية البناء

يتيح لك Babel استخدام لغة JavaScript مكتوبة باستخدام 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'));
});

الميزة الوحيدة التي لا يمكن في Babel تحويلها هي "الوحدات". تتيح لك الوحدات المتوفّرة في ES6 وإنشاء صفوف وتصدير / استيراد الفئات بين الملفات. لتحويل الوحدات تمرير JavaScript من خلال 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/'));
});

ملفات JavaScript متعددة

يتطلب المثال أعلاه تحديد ملف معين، والذي قد يصبح قليلاً من عبء العمل، يقوم مات بما يلي في Gulp للبحث عن الملفات وترجمتها تنتهي بـ 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();
});

عمليات فحص التصميم باستخدام أداة Lint

هناك عدد قليل من الخيارات عند تطبيق Linux على الرمز للمشاكل والأسلوب المُحتمَلَين. الامتثال.

JSHint وJSCS

JSHint وJSCS هما الأكثر شيوعًا المستخدم للتحقق من نمط JavaScript اليوم.

سيوضح JSHint أي مشكلات محتملة في التعليمات البرمجية الخاصة بك بالإضافة إلى استدعاء أي أنماطًا تعتبر ممارسة سيئة عمومًا.

سفحص JSCS نمط التعليمة البرمجية، ويتضمن ذلك أشياء مثل ضمان يتم استخدام علامات تبويب أو مسافات ويتم وضع المسافات في أماكن متسقة.

لاستخدام JSHint وJSCS على رمز ES2015، يجب إضافة "esnext": true إلى .jshintrc و.jscsrc ملف

ESLint

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، أداة تتيح لك إضافة الوبر إلى أي رمز Babel صالح باستخدام ESLint. بينما ESLint تدعم المحللات المخصصة، فإن بعض بناء الجملة الذي يدعمه Babel غير مباشر مزودًا بـ ESLint، لذا فإنه خيار آخر إذا كنت بحاجة إلى المزيد والمرونة. يمكن إعداد ذلك من خلال تخصيص القسم "parser" في ملف .eslintrc:

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

كتب "دان أبراموف" مقالة رائعة حول إعداد لغة ESLint وBabel-eslint في مكتبة Lint. مثل سنة 2015. وكذلك كيفية دمج SublimeLinter-eslint إلى سير العمل للحصول على دعم أداة Lint ES2015 في Sublime Text.

أيّها يجب أن تستخدم؟ ننصحك بتجربتها والتزِم بما يناسبك.

تمييز بنية ES2015

وبالطبع، سيكون عليك إبراز رمز ES2015 الخاص بك بشكل صحيح. أر يستمتعون باستخدام babel-sublime، الذي يمكن أن من التحكم في الحزمة. عند إعداد التطبيق، ننصحك بالتأكد من ضبطه كإعداد تلقائي لأي ملفات. تحتاج إلى تسليط الضوء للعمل عليه. سيتضمن ذلك بالطبع JavaScript ولكن قد أيضًا تغطية JSX في حال استخدام React.

توثيق مؤتمر ES2015

لقد اعتمدنا سابقًا على JSDoc بشكل كبير لتوثيق رمز JavaScript. للأسف، هناك مشاكل مفتوحة في التوافق مع ES2015 (بسبب معالجتها في JSDoc 3)، إلا أنّ هناك عددًا متزايدًا من البدائل المتاحة بينما ننتظر إلى أن يتم حلّها. ESDoc هو أحد هذه الخيارات، وقد أضاف "جوناثان كريمر" معلومات جديدة حول موضوعه يستحق القراءة.

تأليف ملفات Gulp.js باستخدام Babel

وإذا كنت تستخدم Gulp في عملية التصميم، فيمكن الآن تمت كتابتها باستخدام أي بناء جملة معتمد من قبل Babel. نكرر هذه العملية في Web Starter مجموعة ومن السهل نسبيًا إعدادها. يؤدي استخدام إصدار حديث من Gulp Gulp CLI، ما عليك سوى إعادة تسمية gulpfile.js إلى gulpfile.babel.js وسوف يمكنك تفسير ملف ES2015 gulpfile وترجمته باستخدام 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.

يمكنك معرفة المزيد من خلال مشاركة المدونة المفيدة هذه من خلال آدي

الأحرف الحرفية لعناصر الاختصار

تسمح لك القيم الحرفية للكائن بتجنب الاضطرار إلى تحديد المفتاح والقيمة عند أثناء إنشاء كائن، فإذا كان المتغير يحمل نفس اسم المفتاح الذي تريد لديك حقًا.

بمعنى آخر:

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

بصرف النظر عن بناء جملة أقصر، فإن إحدى الميزات الرائعة لاستخدام السهم fat وهي أن نطاق الكائن هو نفس عبارة التضمين. ما يعنيه هذا أنك لا تحتاج إلى استدعاء .bind(this) على الدالة أو لإنشاء متغير = هذا.

هناك الكثير من الأمثلة على رقم MDN:

مستودع أدوات ES6 من Addy's

كانت "آدي" مشغولة بالاحتفاظ بقائمة بأدوات ES2015 وإذا لم تكن الأدوات المذكورة أعلاه بالنسبة لك، ربما تستخدم Grunt بدلاً من Gulp، فقد يكون إجابة لك.

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

يتضمن ما ورد أعلاه أيضًا روابط إلى أدوات Babel الإضافية التي يمكن أن تساعدك خلال اختبار الوحدة وما بعدها.

كتب للقراءة

هناك كتابان يمكنك الاطلاع عليهما مجانًا عبر الإنترنت لمعرفة المزيد عن ES2015. فهم ECMAScript 6 من تأليف "نيكولاس سي" "زاكاس" واستكشاف ES6 من تأليف الدكتور "أكسل راوشماير".

برج بابل

إذا أردت التعرّف على ميزات ES2015 في سطر الأوامر برج الباب يقدم سلسلة من التمارين الرياضية التي قد تثير الاهتمام. يتجولون جميعًا باستخدام Babel.

مراجع أخرى مفيدة: