집 >웹 프론트엔드 >JS 튜토리얼 >Webstorm에서 바벨을 사용하여 ES6을 ES5로 변환하는 방법

Webstorm에서 바벨을 사용하여 ES6을 ES5로 변환하는 방법

php中世界最好的语言원래의: 2018-04-14 10:38:462440검색

이번에는 Webstorm에서 babel을 사용하여 ES6를 ES5로 변환하는 방법과 Webstorm에서 babel을 사용하여 ES6를 ES5로 변환할 때 주의사항은 무엇인지 보여드리겠습니다. 실제 사례를 살펴보겠습니다.

머리말: ECMAScript 6은 2015년 6월에 공식 출시된 JavaScript 언어의 차세대 표준입니다. Mozilla는 이 표준을 기반으로 JavaScript를 출시할 예정입니다. 2.0. ES6의 목표는 JavaScript 언어를 사용하여 크고 복잡한 애플리케이션을 작성하고 엔터프라이즈 수준의 개발 언어가 되도록 하는 것입니다. 그러나 최신 브라우저는 ES6의 새로운 기능에 대한 지원 수준이 높지 않기 때문에 ES6의 새로운 기능을 브라우저에서 직접 사용하려면 다른 도구를 사용해야 합니다.

오늘은 Babel을 사용하여 ES6를 ES5로 자동 트랜스코딩하도록 Webstorm을 구성하는 방법을 공유하겠습니다. Babel은 널리 사용되는 트랜스코더입니다. Babel은 ES6 코드를 ES5 코드로 완벽하게 변환할 수 있으므로 브라우저 지원을 기다리지 않고도 프로젝트에서 ES6 기능을 사용할 수 있습니다.

1. Webstorm에서 새로운 빈 프로젝트를 생성하고 이름을 es6demo로 지정합니다.

2. 그런 다음 루트 디렉터리 아래에 새 package.json을 생성합니다. 이름과 버전이라는 두 가지 속성만 지정하면 됩니다. 3. 웹스톰 터미널(Terminal)을 엽니다. 단축키는 Alt+F12,

install

babel-cli입니다. 전역적으로 설치할 수도 있습니다. babel-cli 설치: npm install --save-dev babel-cli

4. babel-cli를 설치하면 node_

module

s 파일과 package-lock.json 파일이 새로 생성되는 것을 볼 수 있으며, 동시에 패키지에

"devDependencies": {
"babel-cli": "^6.26.0"
}

가 추가로 포함되어 있는 것을 확인할 수 있습니다. .json 파일입니다. 이러한 코드 줄은 babel-cli가 성공적으로 설치되어 종속 항목이 되었음을 나타냅니다.

5. 그런 다음 설정->언어 및 프레임워크에서 Javascript 옵션을 선택하고 버전 버전을 ECMAScript6으로 선택합니다.

6. ES6 코드를 올바르게 식별하기 위해 webstorm 터미널에서 Babel의 사전 설정을 설치합니다. 명령은 다음과 같습니다.

npm install --save-dev babel-preset-es2015

설치 후 package.json 파일에 더 많은

이 있을 것입니다. "babel-preset-es2015": "^6.24.1" 이 코드 줄은 babel-preset-es2015도 성공적으로 설치되었음을 나타냅니다.

7. 루트 디렉터리 아래에 다음 내용을 포함하는 .babelrc라는 새 파일을 만듭니다.

{
 "presets": [
  "es2015"
 ]
}

8. 파일 감시자 설정 - 설정 - 도구 - 파일 감시자.

9. test.js라는 파일을 생성하고 그 안에 es6 구문을 작성하면 오류가 보고되지 않습니다. test-compiled.js는 es5로 컴파일된 파일이며, 기본값은 strict 모드입니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!