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 หลายไฟล์

ตัวอย่างข้างต้นกำหนดให้คุณกำหนดไฟล์เฉพาะ ซึ่งอาจกลายเป็น เป็นภาระ Matt ทำสิ่งต่อไปนี้ใน 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();
});

การตรวจสอบโค้ดและสไตล์

มี 2-3 ตัวเลือกเมื่อเรียกใช้โค้ด Lind สำหรับปัญหาและรูปแบบที่อาจเกิดขึ้น การปฏิบัติตามข้อกำหนด

JSHint และ JSCS

JSHint และ JSCS เป็นเครื่องมือที่พบบ่อยที่สุดสำหรับการตรวจสอบรูปแบบ JavaScript ในปัจจุบัน

JSHint จะไฮไลต์ปัญหาที่อาจเกิดขึ้นในโค้ด รวมถึงระบุรูปแบบที่โดยทั่วไปถือว่าไม่เหมาะสม

JSCS จะพิจารณารูปแบบโค้ด ซึ่งรวมถึงการตรวจสอบว่ามีการใช้แท็บหรือเว้นวรรคอย่างถูกต้องและเว้นวรรคในตำแหน่งที่สอดคล้องกัน

หากต้องการใช้ JSHint และ JSCS ในโค้ด ES2015 คุณต้องเพิ่ม "esnext": true ลงใน .jshintrc และ .jscsrc ไฟล์

ESLint

ESLint เป็นโปรแกรมตรวจสอบโค้ดและสไตล์แบบรวมอยู่ในโปรแกรมเดียว เครื่องมือนี้ได้รับความนิยมอย่างมากและมีฟีเจอร์ที่ยอดเยี่ยมแทน JSHint เช่น สามารถระบุสภาพแวดล้อมที่ JavaScript เขียนขึ้น และ การตั้งค่าระดับข้อผิดพลาด / คำเตือนสำหรับปัญหาเฉพาะ

ESLint สามารถปรับแต่งได้อย่างเต็มรูปแบบและมีกฎ Lint ที่กำหนดเองสำหรับสถานที่ที่คุณอยู่ ที่นั่งคนขับที่สามารถปิดหรือปรับลดลง ใหม่ นอกจากนี้ หากคุณใช้ 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
  }
}

Dan Abramov มีบทความที่ยอดเยี่ยมเกี่ยวกับการตั้งค่า ESLint และ babel-eslint ใน Lint Like It's 2015 และ ครอบคลุมวิธีผสานรวม SublimeLinter-eslint ลงใน สำหรับการรองรับ Linting สำหรับ ES2015 ใน Sublime Text

คุณควรใช้สิ่งใด ลองใช้งานและเลือกใช้สิ่งที่ดีที่สุดสำหรับคุณ

การไฮไลต์ไวยากรณ์ ES2015

แน่นอนว่าคุณต้องการให้โค้ด ES2015 ได้รับการไฮไลต์ไวยากรณ์อย่างถูกต้อง พ สนุกกับการใช้ babel-sublime ซึ่งสามารถ จะติดตั้งจากการควบคุมแพ็กเกจ เมื่อตั้งค่า เราขอแนะนำให้ตั้งค่าเป็นค่าเริ่มต้นสำหรับไฟล์ทั้งหมดที่คุณต้องการไฮไลต์ ซึ่งแน่นอนว่าจะรวม JS แต่อาจครอบคลุม JSX ด้วยหากใช้ React

การจัดทำเอกสาร ES2015

ก่อนหน้านี้เราใช้ JSDoc ในการบันทึกโค้ด JavaScript เป็นอย่างมาก แต่ JSDoc ยังมีปัญหาที่ยังไม่ได้รับการแก้ไขสำหรับการรองรับ ES2015 (ซึ่งจะได้รับการแก้ไขใน JSDoc 3) อย่างไรก็ตาม เรามีทางเลือกอื่นๆ เพิ่มขึ้นเรื่อยๆ ในระหว่างที่รอให้ JSDoc พัฒนาตาม ESDoc เป็นตัวเลือกหนึ่ง และ Jonathan Creamer ได้เขียนข้อมูลล่าสุดมาให้อ่าน

การเขียนไฟล์ Gulp.js ด้วย Babel

หากคุณใช้ Gulp สำหรับกระบวนการสร้างของคุณ ตอนนี้คุณสามารถใช้ Gulpfiles เขียนโดยใช้ไวยากรณ์ที่ Babel สนับสนุน เราทําใน Web Starter Kit และการตั้งค่านั้นค่อนข้างง่าย เมื่อใช้ Gulp เวอร์ชันล่าสุดและ Gulp CLI เพียงเปลี่ยนชื่อ gulpfile.js เป็น gulpfile.babel.js แล้ว Gulp จะตีความและแปลงไฟล์ 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!"

ข้อดีของสตริงเทมเพลตคือการแทนที่จะเป็น JavaScript ซึ่งหมายความว่าคุณสามารถใช้ฟังก์ชันหรือนิพจน์ในบรรทัด

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 ช่วยให้คุณสร้างชื่อพร็อพเพอร์ตี้แบบไดนามิกในออบเจ็กต์ได้ เอกสารของ 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) ในฟังก์ชันหรือ สร้างตัวแปรที่ = this

มีตัวอย่างอีกมากมายใน MDN

Repo เครื่องมือ ES6 ของ Addy

Addy ยุ่งอยู่กับการรวบรวมรายการเครื่องมือ ES2015 และหากเครื่องมือข้างต้นไม่เป็นไปตาม อาจจะใช้ Grunt แทน Gulp คำตอบสำหรับคุณ

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

ข้อมูลข้างต้นยังรวมถึงลิงก์ไปยังเครื่องมือ Babel อื่นๆ ที่สามารถช่วยได้ในระหว่าง การทดสอบหน่วย และอื่นๆ

หนังสือสำหรับอ่าน

คุณสามารถอ่านหนังสือ 2 เล่มต่อไปนี้ได้ฟรีทางออนไลน์เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับ ES2015 การทำความเข้าใจ ECMAScript 6 เขียนโดย Nicholas C. ซากาและการสำรวจ ES6 เขียนโดย ดร. Axel Rauschmayer

หอคอยบาเบล

หากสนใจที่จะเรียนรู้ฟีเจอร์ ES2015 ในบรรทัดคำสั่ง tower-of-babel มีชุดแบบฝึกหัดที่อาจน่าสนใจ ทั้งหมดนี้อธิบายวิธีใช้ Babel

แหล่งข้อมูลอื่นๆ ในกรณีที่สนใจ