ECMAScript 6 사용
답변:
Chrome에서 대부분의 ES6 기능은 "실험용 JavaScript 기능"이라는 플래그 뒤에 숨겨져 있습니다. 을 방문 chrome://flags/#enable-javascript-harmony하여이 플래그를 사용 설정 한 다음 Chrome을 다시 시작하면 많은 새로운 기능이 제공 됩니다.
화살표 기능은 V8 / Chrome에서 아직 구현되지 않았으므로이 플래그는 화살표 기능을 "잠금 해제"하지 않습니다.
화살표 함수는 구문 변경이므로 JavaScript 구문 분석 방법을 변경하지 않으면이 구문을 지원할 수 없습니다. ES6에서 개발하는 것을 좋아한다면 ES6 코드를 작성하고 ES6-to-ES5 컴파일러를 사용하여 모든 기존 (현대) 브라우저와 호환되는 JavaScript 코드를 생성 할 수 있습니다.
예를 들어 https://github.com/google/traceur-compiler를 참조 하십시오 . 글을 쓰는 시점에서 ES6의 모든 새로운 구문 기능을 지원 합니다 . 이 답변 맨 위에 언급 된 플래그와 함께 원하는 결과에 매우 가깝습니다.
콘솔에서 직접 ES6 구문을 실행하려면 콘솔의 JavaScript 평가기를 덮어 쓰려고 시도 할 수 있습니다 (예 : 코드를 실행하기 전에 Traceur 선행 프로 시저가 실행 됨). 이 작업을 좋아한다면 개발자 도구의 동작을 수정하는 방법을 배우려면 이 답변 을 살펴보십시오.
class예를 들어 구문 과 같습니다 .
--enable-javascript-harmony플래그가 설정된 경우 다음이 false를 반환합니다. 플래그가 설정 /(?<!a)b/.test('ab')되지 않은 경우 다음 오류가 발생합니다. "Uncaught SyntaxError : Invalid regular expression : / (? <! a) b / : Invalid group")
바벨 은 ES6를 시험해보기위한 훌륭한 트랜스 필러입니다. 웹 사이트의 "평가하기"섹션에있는 브라우저에서 ES6을 실행할 수 있습니다. jsfiddle과 유사하게 작동합니다.
예를 들어 화살표 :
let add = (x,y) => x + y;
let result = add(1,1);
console.log(result);결과를 표시합니다 2 .
바벨 "번역", 즉 ES6을 현재 브라우저 기술로 실행할 수있는 ES5 자바 스크립트로 변환합니다. 를 통해 Babel을 설치할 수 있습니다 npm install -g babel. 일단 설치되면, 위의 화살표 예를 파일로 저장할 수 있습니다. "ES6.js"파일이라고합니다. 노드를 설치 한 다음 명령 행에서 출력을 노드로 파이프한다고 가정하십시오.
babel ES6.js | node
그리고 당신은 출력을 볼 수 있습니다 2. 다음 명령을 사용하여 번역 된 파일을 영구적으로 저장할 수 있습니다.
babel ES6.js --out-file output.js
output.js "번역":
"use strict";
var add = function (x, y) {
return x + y;
};
var result = add(1, 2);
console.log(result);최신 브라우저에서 실행할 수있는 것은 물론입니다.
ES6는 빠르게 움직이는 대상입니다. Traceur 및 Babel과 같은 트랜스 파일러가 지원하는 기능 및 브라우저 지원을 찾으 려면 호환성 표 를 참조하십시오 . 차트를 확장하여 호환성을 확인하는 데 사용 된 테스트를 확인할 수도 있습니다.
브라우저에서 최신 ES6를 시험해 보려면 Firefox 야간 빌드 또는 Chrome 릴리스 채널을 사용해보십시오.
sudo npm install -g --save-dev babel-cli babel-preset-es2015와 $(npm bin)/babel ES6.js --presets es2015: RF, 그것은 작동하도록 babeljs.io/docs/plugins/preset-es2015
다음 링크 중 하나를 찾고있을 것입니다.
바벨 ( 웹팩 , 갤프 , 그런트 , 기타 프레임 워크 및 언어 )
개발 파이프 라인에서 Babel을 사용하면 JavaScript가 자동으로 크로스 브라우저 호환되도록 변환됩니다 (변환). 또는 TypeScript를 사용하는 경우 쉬울 수 있습니다. 코드가 이미 변환되고 있습니다.
트랜스 파일러 (예 : Babel / Typescript)를 설정하고 싶지 않거나 트랜스 파일러가 아직 지원하지 않는 기능을 사용하고 싶습니까?
chrome : // flags / # enable-javascript-harmony로 이동 하여 JavaScript Harmony 플래그를 활성화하면 브라우저에서 실험적인 ECMAScript 기능을 사용할 수 있습니다 . 일부 기능의 경우 JavaScript Harmony 플래그가 활성화 된 상태에서 Chrome Canary 를 사용해야 할 수도 있습니다 .
새로운 JavaScript API는 일반적으로 Babel에서 다루지 않으며 고유 한 Chrome 플래그를 갖습니다.
화살표 기능 사용
이 질문은 특히 화살표 기능을 사용하여 언급했습니다. 화살표 기능은 이제 IE 및 Opera Mini를 제외한 모든 브라우저에서 기본적으로 지원됩니다. caniuse를 참조하십시오 .
화살표 기능을 사용하려면 약간 어려웠습니다. 아래 이력은이 기능을 사용하기 위해 다른 시점에서 수행 한 작업을 보여줍니다.
1) 처음에 화살표 기능 은 플래그가 활성화 된 Chrome Canary 에서만 작동했습니다
chrome://flags/#enable-javascript-harmony. 이 기능은 버전 39 에서 적어도 부분적으로 구현 된 것 같습니다 .2) 그런 다음 화살표 는 JavaScript Harmony 플래그 뒤에 Chrome 에서 제공되는 기능 입니다.
3) 마지막으로 Chrome 45 에서는 기본적으로 화살표 기능이 사용됩니다.
다른 새로운 ECMAScript 기능에서도 유사한 패턴이 발생할 것으로 예상 할 수 있습니다.
엄격하게 사용 모드를 클로저에 사용하면 (필수는 아니지만 훌륭한 접근 방식) Chrome은 코드를 ES6로 실행할 수 있습니다.
(function(){
'use strict';
//your ES6 code...
})();여기 예제가 있습니다 ... http://jsbin.com/tawubotama/edit?html,js,console,output 사용 엄격 모드 라인 을 제거하고 다시 시도하면 콘솔에 오류가 기록됩니다.
2015 년 11 월 현재 Firefox 및 Edge 는 ES6 경쟁을 주도하고 있습니다. Chrome에없는 기능을 실험하려면이를 사용하십시오. Edge에는 클래스 / 하위 클래스가 있고 Firefox에는 프록시가 있습니다 . 그들 사이에는 거의 모든 ES6 기능이 있습니다 .
Chrome 콘솔에서 ES6을 사용해야하는 경우 간단하고 시도 된 진정한 방법이 있습니다.
인내심을 가지십시오.
브라우저는 대부분의 HTML5 표준에서 발을 끌고있는 Safari조차 ES6을 채택하고 있습니다. Google에 시간을 내면 ES6 기능을 하나씩 구현합니다. 예를 들어 생산 채널에서 플래그없이 화살표 기능을 사용할 수 있습니다.
확장을 기대하지 마십시오. ES6를 한 줄씩 ES5로 변환 할 수 없으므로 Babel을 사용 하여 콘솔을 확장 할 수는 없습니다 .
실험 js 플래그가 있다는 것은 사실이지만, 좋은 이유가 있습니다. V8에는 프록시가 있지만 구식 (비표준) 구문이 있으며 보안 문제가 있습니다. 그것의 구조 또한 불완전하다 : 어떤 경우에는 효과가 있고, 어떤 경우에는 효과가 없다는 것을 알게 될 것이다.
ES6 만 재생하려면 Edge / Firefox로 간단히 재생하십시오. 그들은 거의 모든 Babel을 다루고 콘솔과 디버거를 가지고 있으며 Babel이 제공 할 수없는 기능을 가지고 있습니다.