ES2015

ES2015 (sebelumnya ES6) adalah langkah yang fantastis untuk bahasa JavaScript. Ini membawa fitur baru dan {i>sugaring<i} untuk pola yang membutuhkan boilerplate yang signifikan dalam ES5. Ini mencakup class, fungsi panah, dan modul. Dalam episode ini, kami membahas alat yang kami gunakan untuk memanfaatkan sepenuhnya ES2015 saat membangun aplikasi web JavaScript.

Transpilasi dengan Babel

Meskipun mesin JavaScript membuat progres dalam menerapkan ES2015 fitur asli, ada satu gotcha. Untuk menggunakan rangkaian fitur lengkap hari ini, Anda perlu memindahkan kode Anda kembali ke ES5 sehingga dapat ditafsirkan oleh {i>browser<i} saat ini. Untungnya, ada alat seperti Babel yang membuat proses yang sangat mudah.

Menggunakan Babel dalam Proses Build Anda

Babel memungkinkan Anda menggunakan JavaScript yang ditulis menggunakan ES2015 fiturnya dan mentranspilkannya kembali ke ES5 sehingga dapat bekerja di {i>browser<i} yang saat ini tidak mendukung fitur tersebut. Menambahkan Babel ke proses build dapat melakukannya.

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-satunya fitur yang tidak dapat ditranspilasi Babel adalah Modul. Modul di ES6 memungkinkan Anda membuat class dan mengekspor / mengimpor class antar-file. Untuk mentranspilasi modul meneruskan JavaScript Anda melalui Browserify, yang akan menggabungkan file, lalu teruskan 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 untuk mendefinisikan file tertentu, yang mungkin sedikit beban yang lebih berat, 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 Gaya dan Serat

Ada beberapa opsi saat melakukan analisis lint pada kode Anda untuk kemungkinan terjadinya masalah dan gaya kepatuhan.

JSHint dan JSCS

JSHint dan JSCS adalah metode yang paling umum yang digunakan untuk pengecekan gaya JavaScript saat ini.

JSHint akan menyoroti masalah apa pun yang mungkin terjadi dalam kode Anda serta menunjukkan yang secara umum dianggap sebagai praktik yang buruk.

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

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

ESLint

ESLint adalah linter alternatif dan pemeriksa gaya sekaligus. Alat ini menghabiskan banyak uap dan memiliki beberapa fitur bagus dibandingkan JSHint seperti kemampuan untuk menunjukkan lingkungan tempat {i>JavaScript<i} dibuat dan menyetel tingkat kesalahan / peringatan untuk masalah tertentu.

ESLint sepenuhnya dapat disesuaikan dan menyediakan aturan lint kustom di mana pun Anda berada mengendalikan apakah opsi dapat dimatikan atau dikurangi melalui file konfigurasi. Selain itu, jika Anda menggunakan React, ESLint juga berfungsi dengan JSX.

Menyiapkan ESLint dalam proses build 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 mempertahankan babel-estlint, alat yang memungkinkan Anda melakukan lint pada setiap kode Babel yang valid menggunakan ESLint. Sementara ESLint mendukung parser kustom, beberapa sintaksis yang didukung oleh Babel tidak secara langsung didukung oleh ESLint jadi ini adalah pilihan lain jika Anda membutuhkan lebih banyak fleksibilitas. Dapat disiapkan dengan menyesuaikan bagian parser dari File .eslintrc:

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

Dan Abramov memiliki catatan bagus tentang cara menyiapkan ESLint dan babel-eslint di Lint Seperti Ini 2015. Ini juga membahas cara mengintegrasikan SublimeLinter-eslint menjadi alur kerja Anda untuk dukungan lint ES2015 di Sublime Text.

Yang mana yang harus Anda gunakan? Cobalah dan pilih yang paling sesuai untuk Anda.

Penyorotan Sintaks ES2015

Anda tentu ingin kode ES2015 Anda disorot sintaksis dengan benar. Rab menikmati penggunaan babel-sublime, yang dapat diinstal dari Package Control. Saat menyiapkan, sebaiknya pastikan menyetelnya sebagai default untuk semua file yang perlu Anda soroti. Ini tentu saja termasuk JS tetapi mungkin juga membahas JSX jika menggunakan React.

Mendokumentasikan ES2015

Secara historis, kami sangat mengandalkan JSDoc untuk mendokumentasikan kode JavaScript kami. Sayangnya, terdapat masalah yang belum terselesaikan untuk mendukung ES2015 (karena akan ditangani di JSDoc 3), tetapi ada lebih banyak alternatif yang tersedia selagi kami menunggunya selesai. ESDoc adalah salah satu opsi tersebut dan Jonathan Creamer memiliki penjelasan terbaru terkait hal ini yang layak dibaca.

Membuat file Gulp.js dengan Babel

Jika Anda menggunakan Gulp untuk proses build, Gulpfile sekarang dapat ditulis menggunakan sintaks apa pun yang didukung oleh Babel. Kita melakukannya di Web Starter Paket dan penyiapannya relatif mudah. Menggunakan versi terbaru Gulp dan Gulp CLI, cukup ganti nama gulpfile.js Anda menjadi gulpfile.babel.js dan Gulp akan menafsirkan dan melakukan transpilasi gulpfile ES2015 Anda dengan menggunakan Babel secara otomatis.

Fitur Favorit ES2015

Modul

Modul adalah cara mengekspor nilai, fungsi, dan class dari satu file seperti 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}!');

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

Hal yang menyenangkan dari string template adalah bahwa penggantinya adalah JavaScript eksekusi, artinya Anda dapat menggunakan fungsi atau ekspresi {i>inline<i}.

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.

Anda dapat mempelajari lebih lanjut dari postingan blog praktis ini dengan Adi.

Literal Objek Singkat

Literal objek memungkinkan Anda menghindari keharusan untuk mendefinisikan kunci dan nilai membuat objek, jika variabel memiliki nama yang sama dengan kunci yang miliki.

Artinya:

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

Menjadi ini:

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

Nama Properti Komputasi

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

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 secara singkat di mana ini:

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

Menjadi ini:

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

Selain memiliki sintaksis yang lebih pendek, satu fitur hebat dalam menggunakan panah gemuk fungsi adalah bahwa ruang lingkup objek adalah sama dengan pernyataan yang melampirkannya. Artinya, Anda tidak perlu memanggil .bind(this) pada fungsi Anda atau buat var yang = ini.

Ada banyak contoh lain di MDN.

Repo Alat ES6 Addy

Addy sibuk menyimpan daftar alat ES2015 dan jika alat di atas tidak ada cocok untuk Anda, mungkin Anda menggunakan Grunt dan bukan Gulp, maka ini mungkin menjawab pertanyaan untuk Anda.

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

Di atas juga menyertakan tautan ke alat Babel tambahan yang dapat membantu selama pengujian unit dan seterusnya.

Buku untuk Dibaca

Ada dua buku yang dapat Anda lihat secara gratis secara {i>online<i} untuk mempelajari lebih lanjut tentang ES2015 Memahami ECMAScript 6 yang ditulis oleh Nicholas C. Zakas dan Menjelajahi ES6 ditulis oleh Dr. Axel Rauschmayer.

Menara Babel

Jika Anda tertarik untuk mempelajari fitur ES2015 di baris perintah Anda, tower-of-babel menawarkan serangkaian latihan yang mungkin menarik. Semuanya memandu Anda menggunakan Babel.

Referensi lain jika Anda tertarik: