ES2015

ES2015 (sebelumnya ES6) adalah langkah maju yang fantastis untuk bahasa JavaScript. Rilis ini menghadirkan fitur dan sugaring baru untuk pola yang memerlukan boilerplate signifikan di ES5. Ini mencakup class, fungsi panah, dan modul. Dalam episode ini, kami membahas alat yang kami gunakan untuk memanfaatkan ES2015 secara penuh saat membangun aplikasi web JavaScript.

Transpilasi dengan Babel

Meskipun mesin JavaScript membuat progres besar dalam menerapkan fitur ES2015 secara native, hanya ada satu getcha. Untuk menggunakan rangkaian fitur yang lengkap saat ini, Anda harus mentranspilasi kode kembali ke ES5 agar dapat ditafsirkan oleh browser saat ini. Untungnya, ada alat seperti Babel yang membuat proses ini mudah.

Menggunakan Babel dalam Proses Build Anda

Dengan Babel, Anda dapat mengambil JavaScript yang ditulis menggunakan fitur ES2015 dan mentranspilasinya kembali ke ES5 sehingga dapat berfungsi di browser yang saat ini tidak mendukung fitur ini. Menambahkan Babel ke proses build dapat dilakukan seperti itu.

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

Satu fitur yang tidak dapat ditranspilasi oleh Babel adalah Modul. Modul dalam ES6 memungkinkan Anda membuat class dan mengekspor / mengimpor class antar-file. Untuk mentranspilasi modul, teruskan JavaScript melalui Browserify, yang akan menggabungkan file lalu meneruskannya melalui Babelify (versi Babel yang dapat menangani output dari 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/'));
});

Beberapa File JavaScript

Contoh di atas mengharuskan Anda menentukan file tertentu, yang mungkin menjadi sedikit beban, Matt melakukan hal berikut di Gulp untuk menelusuri dan mentranspilasi file yang diakhiri dengan .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();
});

Pemeriksaan Lint dan Gaya

Ada beberapa opsi saat melakukan analisis lint kode untuk mengetahui kemungkinan masalah dan kepatuhan gaya.

JSHint dan JSCS

JSHint dan JSCS adalah alat yang paling umum digunakan untuk pemeriksaan gaya JavaScript saat ini.

JSHint akan menandai setiap kemungkinan masalah dalam kode Anda, serta menunjukkan setiap pola yang secara umum dianggap sebagai praktik yang buruk.

JSCS akan melihat gaya kode Anda, termasuk hal-hal seperti memastikan hanya tab atau spasi yang digunakan dan spasi ditempatkan di tempat yang konsisten.

Untuk menggunakan JSHint dan JSCS pada kode ES2015, Anda perlu menambahkan "esnext": true ke file .jshintrc dan .jscsrc Anda

ESLint

ESLint adalah pemeriksa gaya dan linter alternatif sekaligus. Alat ini menimbulkan banyak Steam dan memiliki beberapa fitur bagus melalui JSHint seperti dapat menunjukkan lingkungan tempat JavaScript Anda ditulis dan menyetel tingkat error / peringatan untuk masalah tertentu.

ESLint sepenuhnya dapat disesuaikan dan menyediakan aturan analisis lint kustom di mana Anda berada di kursi pengemudi untuk menentukan apakah opsi dapat dinonaktifkan atau dikurangi melalui file konfigurasinya. Selain itu, jika Anda menggunakan React, ESLint juga berfungsi dengan JSX.

Menyiapkan ESLint dalam proses build Anda juga tidak terlalu sulit.

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

Tim Babel akan memelihara babel-estlint, sebuah alat yang memungkinkan Anda melakukan lint pada kode Babel yang valid menggunakan ESLint. Meskipun ESLint mendukung parser kustom, beberapa sintaksis yang didukung oleh Babel tidak langsung didukung oleh ESLint, jadi ini adalah opsi lain jika Anda memerlukan fleksibilitas lebih lanjut. Ini dapat disiapkan dengan menyesuaikan bagian parser dari file .eslintrc Anda:

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

Dan Abramov memiliki penulisan yang bagus tentang penyiapan ESLint dan babel-eslint di Lint Like It 2015. Bagian ini juga membahas cara mengintegrasikan SublimeLinter-eslint ke dalam alur kerja Anda untuk dukungan lint ES2015 di Sublime Text.

Manakah yang seharusnya Anda gunakan? Cobalah dan tetap pilih yang paling cocok untuk Anda.

Sorotan Sintaksis ES2015

Tentu saja Anda ingin kode ES2015 disorot sintaks dengan benar. Kami senang menggunakan babel-sublime, yang dapat diinstal dari Package Control. Saat menyiapkan, sebaiknya pastikan untuk menyetelnya sebagai default untuk setiap file yang perlu Anda sorot agar dapat ditangani. Ini tentu saja akan mencakup JS tetapi juga dapat mencakup JSX jika menggunakan React.

Mendokumentasikan ES2015

Secara historis, kita sangat bergantung pada JSDoc untuk mendokumentasikan kode JavaScript. Sayangnya, terdapat masalah terbuka untuk mendukung ES2015 (karena telah ditangani dalam JSDoc 3). Namun, ada semakin banyak alternatif yang tersedia sambil kami menunggu penyelesaiannya. ESDoc adalah salah satu opsi tersebut dan Jonathan Creamer memiliki penjelasan terbaru tentang opsi ini yang patut dibaca.

Membuat file Gulp.js dengan Babel

Jika Anda kebetulan menggunakan Gulp untuk proses build, Gulpfiles sekarang dapat ditulis menggunakan sintaksis apa pun yang didukung oleh Babel. Kita melakukannya di Web Starter Kit dan penyiapannya relatif mudah. Dengan menggunakan Gulp versi terbaru dan CLI Gulp, cukup ganti nama gulpfile.js menjadi gulpfile.babel.js dan Gulp akan menafsirkan dan mentranspilasi gulpfile ES2015 Anda menggunakan Babel secara otomatis.

Fitur Favorit ES2015

Modul

Modul adalah cara untuk mengekspor nilai, fungsi, dan class dari satu file sehingga Anda dapat mengimpornya ke file lain.

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

Situs ini memiliki beberapa contoh dan penjelasan yang bagus tentang Modul.

String Template

String template memungkinkan Anda mengganti port string dengan variabel.

// Simple string substitution
var name = "Brendan";
console.log('Yo, ${name}!');

// => "Yo, Brendan!"

Hal yang menyenangkan dengan string template adalah substitusinya merupakan eksekusi JavaScript, yang berarti Anda dapat menggunakan fungsi atau ekspresi inline.

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.

Anda dapat mempelajari lebih lanjut dari postingan blog praktis dari Addy.

Literal Objek Shorthand

Dengan literal objek, Anda tidak perlu menentukan kunci dan nilai saat membuat objek, jika variabel memiliki nama yang sama dengan kunci yang dimiliki objek tersebut.

Artinya:

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

Menjadi seperti ini:

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

Nama Properti Computed

Fitur di ES2015 ini memungkinkan Anda membuat nama properti secara dinamis pada sebuah objek. Dokumen Mozilla adalah sumber info yang bagus dan memiliki contoh yang bagus.

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

Fungsi Panah Lemak

Fungsi panah lemak memungkinkan Anda menulis fungsi dengan singkat di mana ini:

button.addEventListener('click', function(event) {
  console.log('The button has received a click', event);
});

Menjadi seperti ini:

button.addEventListener('click', (event) => {
  console.log('The button has received a click', event);
});

Selain memiliki sintaksis yang lebih pendek, salah satu fitur bagus penggunaan fungsi panah gemuk adalah bahwa cakupan objek sama dengan pernyataan penutup. Artinya, Anda tidak perlu memanggil .bind(this) pada fungsi Anda atau membuat var yang = this.

Ada banyak contoh lainnya di MDN.

Addy's ES6 Tools Repo

Addy sibuk menyimpan daftar alat ES2015 dan jika alat di atas tidak sesuai untuk Anda, mungkin Anda menggunakan Grunt dan bukan Gulp, maka alat ini mungkin bisa membantu Anda.

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

Artikel di atas juga mencakup link ke alat Babel tambahan yang dapat membantu selama pengujian unit dan seterusnya.

Buku untuk Dibaca

Ada dua buku yang dapat Anda lihat secara online gratis untuk mempelajari ES2015 lebih lanjut. Understanding ECMAScript 6 yang ditulis oleh Nicholas C. Zakas dan Exploring ES6 ditulis oleh Dr. Axel Rauschmayer.

Menara Babel

Jika Anda tertarik mempelajari fitur ES2015 di command line, tower-of-babel menawarkan serangkaian latihan yang mungkin menarik. Mereka semua berjalan menggunakan Babel.

Referensi lain jika menarik: