ES2015

ES2015 (이전 명칭: ES6)는 JavaScript 언어에 대해 훌륭하게 한 걸음 더 나아간 것입니다. 새로운 기능과 슈가링이 필요했던 패턴을 알아봤습니다. 이 클래스, 화살표 함수, 모듈이 포함됩니다. 이 에피소드에서는 우리는 JavaScript 웹 앱을 빌드할 때 ES2015를 최대한 활용합니다.

Babel을 사용한 트랜스파일

자바스크립트 엔진은 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를 통해 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();
});

린트 및 스타일 검사

가능한 문제와 스타일을 위해 코드를 린트할 때 몇 가지 옵션이 있습니다. 규정 준수를 지원합니다

JSHint 및 JSCS

JSHint와 JSCS가 가장 일반적임 오늘날의 자바스크립트 스타일 검사에 사용되는 도구들이 포함되어 있습니다.

JSHint는 코드에서 발생할 수 있는 문제를 강조 표시하고 일반적으로 나쁜 관행으로 여겨지는 패턴입니다.

JSCS는 코드 스타일을 검토하며 여기에는 탭이나 공백만 사용되며 공백은 일관된 위치에 배치됩니다.

ES2015 코드에서 JSHint와 JSCS를 사용하려면 "esnext": true을 .jshintrc 및 .jscsrc 파일

ESLint

ESLint는 대체 린터 및 스타일 검사기입니다. 이 도구는 많은 관심을 받고 있으며 JSHint보다 나은 몇 가지 기능을 갖추고 있습니다. JavaScript가 작성된 환경을 나타낼 수 있고 특정 문제에 대한 오류 / 경고 수준 설정

ESLint는 완벽하게 맞춤설정할 수 있으며 현재 환경에 맞춤 린트 규칙을 제공합니다. 구성 파일이 포함됩니다 또한 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 코드를 린트할 수 있는 도구입니다. ESLint가 진행되는 동안 커스텀 파서를 지원하지만 Babel에서 지원하는 일부 구문은 ESLint에서 지원되므로 추가 작업이 필요한 경우 사용할 수 있는 또 다른 옵션입니다. 있습니다 parser 섹션을 맞춤설정하여 설정할 수 있습니다. .eslintrc 파일:

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

Dan Abramov는 린트에서 ESLint와 babel-eslint를 설정하는 것에 대한 훌륭한 글을 남겼습니다. 좋아요 2015년. 또한 Google Cloud 콘솔과 SublimeLinter-eslint를 자세히 알아보겠습니다.

어떤 방법을 사용해야 할까요? 시도해 보고 자신에게 가장 적합한 방법을 사용하세요.

ES2015 구문 강조 표시

물론 ES2015 코드의 구문은 정확하게 강조되는 것이 좋습니다. babel-sublime을 사용해 보세요. Package Control에서 설치할 수 있습니다. 설정할 때 이 파일을 모든 파일의 기본값으로 설정하는 것이 좋습니다. 하이라이트가 필요합니다. 물론 JavaScript도 포함되지만 React를 사용하는 경우 JSX도 다룰 예정입니다.

ES2015 문서화

Google에서는 지금까지 JavaScript 코드 문서화에 JSDoc를 상당히 많이 활용했습니다. 안타깝게도 ES2015 지원과 관련해 해결되지 않은 문제가 있습니다 (JSDoc 3에서 해결 예정). 하지만 따라잡을 때까지 사용할 수 있는 대안의 수는 점점 늘어나고 있습니다. ESDoc도 이러한 옵션 중 하나로, Jonathan Creamer는 최근에 읽어볼 만한 기사를 작성했습니다.

Babel을 사용하여 Gulp.js 파일 작성

빌드 프로세스에 Gulp를 사용하는 경우 이제 Gulpfile은 Babel에서 지원하는 구문을 사용하여 작성됩니다. 이 작업은 Web Starter에서 이 작업을 수행합니다. 키트 비교적 간단하게 설정할 수 있습니다. 최신 버전의 Gulp 및 Gulp CLI를 사용하려면 gulpfile.js의 이름을 gulpfile.babel.js로 변경하기만 하면 됩니다. 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}!');

// => "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);
});

짧은 구문과 더불어 fat 화살표 사용의 한 가지 유용한 기능은 함수의 범위가 둘러싸는 문과 동일하다는 것입니다. 즉, 함수에서 .bind(this)를 호출할 필요가 없으며 이 = 이렇게 하는 변수를 만듭니다.

이 주제에 대한 더 많은 사례가 MDN

Addy ES6 도구 저장소

애디는 ES2015 도구 목록을 관리하느라 바빠서 위 도구가 없다면 Gulp 대신 Grunt를 사용 중이라면 해답을 찾을 수 있습니다.

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

위에는 교육 중에 도움이 될 만한 추가 Babel 도구 링크도 포함되어 있습니다. 단위 테스트 등이 있습니다.

읽을 만한 도서

온라인에서 무료로 확인할 수 있는 두 권의 책에 관해 자세히 알아볼 수 있습니다. ES2015를 지원합니다. ECMAScript 6 이해하기 니콜라스 C. Zakas 및 ES6 탐색 작성자: 악셀 라우슈마이어 박사

바벨탑

명령줄에서 ES2015 기능을 배우는 데 관심이 있다면 tower-of-babel을 기반으로 몇 가지 연습을 하겠습니다. 이 모든 것이 Babel을 사용할 수 있습니다.

관심을 가질 만한 기타 리소스: