브라우저 콘솔에서 ECMAScript 6 코드를 실행하는 방법을 찾고 있지만 대부분의 브라우저는 원하는 기능을 지원하지 않습니다. 예를 들어, Firefox는 화살표 기능을 지원하는 유일한 브라우저입니다.
Chrome에서 이러한 기능을 실행할 수있는 방법 (확장자, 사용자 스크립트 등)이 있습니까?
답변
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 선행 프로 시저가 실행 됨). 이 작업을 좋아한다면 개발자 도구의 동작을 수정하는 방법을 배우려면 이 답변 을 살펴보십시오.
답변
바벨 은 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 릴리스 채널을 사용해보십시오.
답변
다음 링크 중 하나를 찾고있을 것입니다.
바벨 ( 웹팩 , 갤프 , 그런트 , 기타 프레임 워크 및 언어 )
개발 파이프 라인에서 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이 제공 할 수없는 기능을 가지고 있습니다.
답변
