ES2015

ES2015 (ก่อนหน้านี้เรียกว่า ES6) เป็น ก้าวไปข้างหน้าที่ยอดเยี่ยมสำหรับภาษา JavaScript ซึ่งจะมาพร้อมกับฟีเจอร์ใหม่ๆ และ การใช้น้ำตาลสำหรับรูปแบบที่ต้องใช้ต้นแบบที่สำคัญใน ES5 ช่วงเวลานี้ ประกอบด้วยคลาส ฟังก์ชันลูกศร และโมดูล ในตอนนี้ เราจะพูดถึงเครื่องมือ ที่เราใช้เพื่อให้ได้รับประโยชน์อย่างเต็มที่จาก ES2015 เมื่อสร้างเว็บแอป JavaScript

การถ่ายเทด้วย Babel

แม้ว่าเครื่องมือ JavaScript จะให้ผลลัพธ์ที่ดี progress ในการติดตั้งใช้งาน ES2015 ตามปกติ คุณลักษณะบางอย่างก็มีอยู่ 1 อย่าง เพื่อใช้ฟีเจอร์ทั้งหมด คุณจะต้องเปลี่ยนรูปแบบโค้ดกลับลงไปเป็น 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-Elint ใน Lint แบบที่เป็น 2015 และ ครอบคลุมวิธีผสานรวม SublimeLinter-eslint ลงใน สำหรับการรองรับ Linting สำหรับ ES2015 ใน Sublime Text

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

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

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

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

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

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

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

ที่เก็บเครื่องมือ 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

แหล่งข้อมูลอื่นๆ ที่อาจสนใจมีดังนี้