ES2015

ES2015 (tên chính thức là ES6) là một một bước tiến tuyệt vời cho ngôn ngữ JavaScript. Ứng dụng này mang đến những tính năng mới và tạo đường cho các mẫu cần có mã nguyên mẫu quan trọng trong ES5. Chiến dịch này bao gồm các lớp, hàm mũi tên và mô-đun. Trong tập này, chúng tôi đề cập đến các công cụ mà chúng tôi sử dụng để khai thác tối đa ES2015 khi xây dựng ứng dụng web sử dụng JavaScript.

Chuyển đổi bằng sFTP

Mặc dù các công cụ JavaScript đang tạo ra tiến trình trong việc triển khai ES2015 đều có các tính năng gốc, nhưng có một sự cố không thể xảy ra. Để sử dụng trọn bộ tính năng hôm nay, bạn cần chuyển mã trở lại ES5 để mã được diễn giải theo trình duyệt hiện tại. Rất may là có những công cụ như adb giúp tạo ra quá trình này diễn ra suôn sẻ.

Sử dụng sFTP trong quy trình xây dựng của bạn

Babel cho phép bạn lấy JavaScript được viết bằng ES2015 tính năng và chuyển mã này trở lại ES5 để có thể hoạt động trong các trình duyệt Google không hỗ trợ các tính năng này. Việc thêm adb vào quy trình xây dựng có thể làm như vậy.

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

Một tính năng mà Squarespace không thể chuyển đổi là Mô-đun. Các mô-đun trong ES6 cho phép bạn tạo lớp và xuất / nhập lớp giữa các tệp. Để chuyển đổi mô-đun chuyển JavaScript của bạn qua Browserify, sẽ hợp nhất rồi chuyển tệp này qua Babelify (một phiên bản của ABI có thể xử lý kết quả từ 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/'));
});

Nhiều tệp JavaScript

Ví dụ trên yêu cầu bạn xác định một tệp cụ thể, tệp này có thể trở thành là một gánh nặng, Matt thực hiện những việc sau trong Gulp để tìm kiếm và chuyển đổi các tệp kết thúc bằng .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();
});

Kiểm tra tìm kiểu tóc và xơ vải

Có một số lựa chọn khi tìm lỗi mã nguồn cho mã của bạn đối với các vấn đề và kiểu có thể xảy ra sự tuân thủ.

JSHint và JSCS

JSHint và JSCS là hai hàm phổ biến nhất được dùng để kiểm tra kiểu JavaScript ngày nay.

JSHint sẽ làm nổi bật mọi vấn đề có thể xảy ra trong mã của bạn, cũng như nêu rõ mọi vấn đề thường được coi là phương pháp không phù hợp.

JSCS sẽ xem xét kiểu mã của bạn, bao gồm những việc như đảm bảo chỉ thẻ hoặc dấu cách được sử dụng và dấu cách được đặt vào vị trí nhất quán.

Để sử dụng JSHint và JSCS trên mã ES2015, bạn cần thêm "esnext": true vào Tệp .jshintrc và .jscsrc

ESLint

ESLint là một trình kiểm tra kiểu và công cụ tìm lỗi mã nguồn thay thế trong một. Công cụ này nhận được rất nhiều hơi nước và có một số tính năng tốt trên JSHint chẳng hạn như có thể cho biết các môi trường mà JavaScript của bạn được viết cho và đặt mức lỗi / cảnh báo cho các vấn đề cụ thể.

ESLint hoàn toàn có thể tuỳ chỉnh và cung cấp các quy tắc tuỳ chỉnh để tìm lỗi mã nguồn mà bạn đang truy cập vị trí của người lái xe về việc có thể tắt hay giảm bớt các tuỳ chọn thông qua tệp cấu hình. Ngoài ra, nếu bạn đang dùng React, thì ESLint cũng tương thích với JSX.

Việc thiết lập ESLint trong quá trình xây dựng cũng không quá khó.

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

Nhóm Squarespace duy trì babel-estlint, một công cụ cho phép bạn tìm lỗi mã nguồn bất kỳ cho mã hay không hợp lệ bất kỳ bằng cách sử dụng ESLint. Trong khi ESLint hỗ trợ các trình phân tích cú pháp tuỳ chỉnh, một số cú pháp mà Squarespace hỗ trợ không trực tiếp được ESLint hỗ trợ, vì vậy, đây là một lựa chọn khác nếu bạn cần thêm linh hoạt hơn. Bạn có thể thiết lập chế độ này bằng cách tuỳ chỉnh phần parser trên Tệp .eslintrc:

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

Dan Abramov có một bài viết rất hay về cách thiết lập ESLint và babel-eslint trong Lint Giống như năm 2015. Điều này cũng đề cập đến cách tích hợp SublimeLinter-eslint vào quy trình làm việc để hỗ trợ tìm lỗi mã nguồn ES2015 trong Sublime Text.

Bạn nên sử dụng công cụ nào? Hãy thử và gắn bó với phương án phù hợp nhất với bạn.

Làm nổi bật cú pháp ES2015

Tất nhiên, bạn sẽ muốn mã ES2015 được đánh dấu chính xác theo cú pháp. T4 thích sử dụng babel-sublime, là ứng dụng có thể được cài đặt qua phần Package Control (Kiểm soát gói). Khi thiết lập, bạn nên đặt tuỳ chọn này làm chế độ mặc định cho mọi tệp mà bạn cần đánh dấu để làm việc. Tất nhiên, thao tác này sẽ bao gồm mã JS, nhưng có thể cũng đề cập đến cả JSX nếu dùng React.

Ghi lại ES2015

Trước đây, chúng tôi chủ yếu dựa vào JSDoc để ghi lại mã JavaScript. Rất tiếc, nó có các vấn đề chưa giải quyết khi hỗ trợ ES2015 (do được giải quyết trong JSDoc 3). Tuy nhiên, số lượng phương án thay thế ngày càng tăng trong khi chúng ta chờ đợi phiên bản này thích ứng. ESDoc là một trong những lựa chọn như vậy và gần đây Jonathan Creamer có một bài viết về nội dung đáng đọc.

Tạo tệp Gulp.js bằng Squarespace

Nếu bạn đang sử dụng Gulp cho quy trình xây dựng của mình, Gulpfiles hiện có thể được tạo bằng bất kỳ cú pháp nào mà Squarespace hỗ trợ. Chúng tôi thực hiện việc này trong Web Starter Bộ công cụ và việc thiết lập cũng tương đối đơn giản. Sử dụng phiên bản Gulp gần đây và Gulp CLI, chỉ cần đổi tên gulpfile.js của bạn thành gulpfile.babel.js và Gulp sẽ tự động diễn giải và chuyển đổi tệp gulpfile ES2015 bằng JDK.

Các tính năng yêu thích tại ES2015

Mô-đun

Mô-đun là cách để xuất các giá trị, hàm và lớp từ một tệp, để bạn có thể nhập chúng vào một tệp khác.

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

Trang web này có một số ví dụ và lời giải thích hữu ích về Mô-đun.

Chuỗi mẫu

Chuỗi mẫu cho phép bạn thay thế cổng của một chuỗi bằng một biến.

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

// => "Yo, Brendan!"

Điều tuyệt vời với chuỗi mẫu là thay thế là JavaScript thực thi, tức là bạn có thể sử dụng các hàm hoặc biểu thức cùng dòng.

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.

Bạn có thể tìm hiểu thêm từ bài đăng hữu ích này trên blog bằng cách Tiện ích.

Đối tượng viết tắt

Hằng đối tượng giúp bạn tránh phải xác định khoá và giá trị khi tạo đối tượng, nếu biến có cùng tên với khoá mà bạn muốn cần có.

Ý nghĩa:

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

Trở thành:

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

Tên thuộc tính đã tính toán

Tính năng này trong ES2015 cho phép bạn tự động tạo tên thuộc tính trên . Các tài liệu của Mozilla là một nguồn thông tin tuyệt vời và tài liệu ví dụ.

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

Hàm mũi tên mỡ

Hàm mũi tên béo cho phép bạn viết nhanh các hàm dưới đây:

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

Trở thành:

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

Ngoài cú pháp ngắn hơn, một tính năng tuyệt vời của việc sử dụng mũi tên béo là phạm vi của đối tượng giống với câu lệnh bao gồm. Điều này có nghĩa là bạn không cần gọi .bind(this) trên hàm hoặc hãy tạo một var = this.

Còn rất nhiều ví dụ khác trên MDN.

Kho lưu trữ công cụ ES6 của Addy

Addy đang bận lưu giữ danh sách các công cụ ES2015 và nếu các công cụ ở trên thì không phù hợp với bạn, có thể bạn đang sử dụng Grunt thay vì Gulp, thì ứng dụng này câu trả lời cho bạn.

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

Ở trên cũng bao gồm các đường liên kết đến công cụ adb bổ sung có thể trợ giúp trong quá trình kiểm thử đơn vị và hơn thế nữa.

Sách nên đọc

Có hai cuốn sách mà bạn có thể xem miễn phí trên mạng để tìm hiểu thêm Tiếng Tây Ban Nha năm 2015. Tìm hiểu về ECMAScript 6 do Nicholas C. viết kịch bản. Zakas và Khám phá ES6 được viết bởi Tiến sĩ Axel Rauschmayer.

Tháp Eiffel

Nếu bạn muốn tìm hiểu các tính năng ES2015 trong dòng lệnh, tower-of-babel mang đến loạt bài tập mà bạn có thể quan tâm. Tất cả đều được hướng dẫn bằng cách sử dụng adb.

Các tài nguyên khác nếu bạn quan tâm: