此页面由 Cloud Translation API 翻译。

ES2015

ES2015（以前称为 ES6）是一个 JavaScript 语言的发展迈出一大步它带来了一些新功能，针对在 ES5 中需要大量样板的模式加糖。这个包括类、箭头函数和模块。本期将介绍多种工具。

使用 Babel 进行翻译

尽管 JavaScript 引擎使 ES2015 的实现进度但有一个问题。使用完整的功能集现在，您需要将代码转译为 ES5，当前浏览器所能识别的幸运的是，像 Babel 这样的工具这个过程就很轻松了

在构建流程中使用 Babel

Babel 可让您接受使用 ES2015 编写的 JavaScript 并将其转译为 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 （可以处理 Browserify 的输出）的 Babel 版本。

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

lint 检查和样式检查

在对代码执行 lint 请求以查找可能的问题和样式时，有几个选项可供选择合规性。

JSHint 和 JSCS

JSHint 和 JSCS 是最常见的 JavaScript 样式检查所用的工具。

JSHint 将突出显示您的代码中可能存在的问题，通常被视为一种不良做法。

JSCS 会查看代码的样式，包括确保仅使用制表符或空格，且空格符应保持一致。

要在 ES2015 代码上使用 JSHint 和 JSCS，您需要将 "esnext": true 添加到 .jshintrc 和 .jscsrc 文件

ESLint

ESLint 是替代 linter 和样式检查工具，集于一处。与 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，一种工具，可让您使用 ESLint 对任何有效的 Babel 代码执行 lint 请求。虽然 ESLint 支持自定义解析器，但 Babel 支持的某些语法因此，如果您需要进一步编写代码，灵活性。这可以通过自定义parser .eslintrc 文件：

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

Dan Abramov 撰写了一篇有关在 Lint 中设置 ESLint 和 babel-eslint 的文章就像这样 2015 年。它还介绍了如何集成 SublimeLinter-eslint 到 Sublime Text 中 ES2015 lint 支持的工作流。

您应该使用哪种方式？建议您多加尝试，再选择最适合您的方式。

ES2015 语法突出显示

您当然希望您的 ES2015 代码以正确的语法突出显示。周三喜欢使用 babel-sublime，它通过 Package Control 安装。设置时，我们建议您确保将其设为所有文件的默认设置需要突出显示才能解决。当然，这包括 JS，但如果使用 React，也会介绍 JSX。

有关 ES2015 的文档

过去，我们高度依赖 JSDoc 来记录 JavaScript 代码。遗憾的是，它在支持 ES2015 方面存在待解决的问题（需要在 JSDoc 3 中解决），但在等待它迎合它的形势下，有越来越多的替代方案可以使用。ESDoc 就是这样一种选择，Jonathan Creamer 最近撰写了一篇关于它的文章，值得一读。

使用 Babel 编写 Gulp.js 文件

如果您恰巧在构建流程中使用了 Gulp，那么现在可以使用 Gulpfiles 使用 Babel 支持的任何语法编写。我们会在网站新手版中执行此操作套件而且设置起来相对简单。使用最新版本的 Gulp 和 Gulp CLI，只需将 gulpfile.js 重命名为 gulpfile.babel.js，Gulp 就会使用 Babel 自动解释和转译您的 ES2015 gulpfile。

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

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

模板字符串的好处是，替换成是一段 JavaScript 代码执行，这意味着您可以使用函数或内联表达式。

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.

您可以参阅这篇实用的博文， 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);
});

除了使用较短的语法之外，使用胖箭头还有一项很棒的功能对象的作用域与封闭语句相同。这意味着您无需对函数或创建一个 = this 的 var。

有关更多示例， MDN。

ES2015

使用 Babel 进行翻译

在构建流程中使用 Babel

多个 JavaScript 文件

lint 检查和样式检查

JSHint 和 JSCS

ESLint

ES2015 语法突出显示

有关 ES2015 的文档

使用 Babel 编写 Gulp.js 文件

热门 ES2015 功能

模块

模板字符串

简写对象字面量

计算出的属性名称

脂肪箭头功能

更多信息链接

Addy 的 ES6 工具库

值得一读的图书

巴贝尔塔

ES2015 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

使用 Babel 进行翻译

在构建流程中使用 Babel

多个 JavaScript 文件

lint 检查和样式检查

JSHint 和 JSCS

ESLint

ES2015 语法突出显示

有关 ES2015 的文档

使用 Babel 编写 Gulp.js 文件

热门 ES2015 功能

模块

模板字符串

简写对象字面量

计算出的属性名称

脂肪箭头功能

更多信息链接

Addy 的 ES6 工具库

值得一读的图书

巴贝尔塔

ES2015