WebStorm ES6에서 바벨을 사용하는 방법

이번에는 WebStorm ES6에서 Babel을 사용하는 방법과 WebStorm ES6에서 Babel을 사용할 때 주의사항에 대해 알려드리겠습니다. 실제 사례를 살펴보겠습니다.

1. 문법 지원 설정

환경설정 > 언어 및 프레임워크 > JavaScript

2. 바벨설치

1. 전역 설치

 npm install -g babel-cli

2. 현재 프로젝트는 다양한 바벨 버전을 사용하기에 적합합니다

 npm install --save-dev babel-cli

3. Babel

# 转码结果输出到标准输出
 babel example.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
 babel example.js --out-file compiled.js
# 或者
 babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
 babel src --out-dir lib
# 或者
 babel src -d lib
# -s 参数生成source map文件
 babel src -d lib -s

기본 사용법 4. 웹스톰에서 바벨 사용하기

0. 테스트 케이스로 사용할 새로운 test.js 파일을 생성하세요

input.map(item => item + 1);

1. 프로젝트에 파일을 추가해야 합니다: package.json

{ "name": "application-name", "version": "0.0.1"}

2. 현재 프로젝트에서 babel

npm install --save-dev babel-cli

을 설치합니다. 3. WebStorm

과 함께 제공되는 File Watcher 기능을 사용하세요. Preferences > Tools > File Watchers 오른쪽에 있는 + 기호를 클릭하고 babel을 선택한 후 바로 확인을 클릭합니다.

작업이 완료된 후 이때 JS 코드를 수정하면 test-compiled.js 파일이 동기적으로 생성되는 것을 확인할 수 있으며, 열어보면 해당 코드가 test.js 코드와 일치하는 것을 확인할 수 있습니다.

또한 트랜스코딩 규칙을 구성해야 합니다. 아래를 계속 읽어보세요. ↓↓↓

4. 구성 파일 <span style="color:#000000;font-family:NSimsun;">.babelrc<code><span style="color:#000000;font-family:NSimsun;">.babelrc</span>

Babel的配置文件是<span style="font-family:NSimsun;">.babelrc</span>，存放在项目的根目录下。使用Babel的第一步，就是配置这个文件。

该文件用来设置转码规则和插件，基本格式如下。

{ "presets": [], "plugins": []}

5、设置转码规则

<span style="font-family:NSimsun;">presets</span> 추가

Babel의 구성 파일은 <span style="font-family:NSimsun;">.babelrc<p style="text-align: left;"></p></span>이며 프로젝트의 루트 디렉터리에 저장됩니다. . Babel을 사용하는 첫 번째 단계는 이 파일을 구성하는 것입니다.

이 파일은 트랜스코딩 규칙 및 플러그인을 설정하는 데 사용됩니다. 기본 형식은 다음과 같습니다.

rreee 5. 트랜스코딩 규칙 설정

<span style="font-family:NSimsun;">presets<p style="text-align: left;"></p></span> 필드는 트랜스코딩 규칙을 설정합니다. 공식은 다음과 같은 규칙 세트를 제공합니다. 필요에 따라 설치할 수 있습니다.

rreee

es2015를 설치해야 하며 명령은 다음과 같습니다.

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

6.

Update

구성 파일 .babelrc

해당 규칙을 구성 파일에 저장합니다.

rreee

7. 완성, 효과 확인

위의 단계가 완료되면 코드 수정 후 ES6 코드를 ES5로 자동 변환할 수 있습니다.

5. 명령을 사용하여 코드를 수동으로 컴파일하세요

1. package.json 파일을 변경하세요

# ES2015转码规则
npm install --save-dev babel-preset-es2015
# react转码规则
npm install --save-dev babel-preset-react
# ES7不同阶段语法提案的转码规则（共有4个阶段），选装一个
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-stage-3

2. 명령을 사용하여 ES5 코드

{
 "presets": [
 "es2015"
 ],
 "plugins": []
}

를 생성하세요. 3. 효과

src 디렉터리의 코드는 lib 디렉터리로 컴파일됩니다. 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서: 🎜🎜JS는 목록을 트리 구조로 변환합니다🎜🎜🎜🎜🎜JS를 사용하면 웹페이지에서 사진을 드래그할 수 있습니다🎜🎜🎜🎜

위 내용은 WebStorm ES6에서 바벨을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!