WebStorm ES6 문법 지원 설정&babel 사용 및 자동 컴 파일(상세 설명)

문법 지원 설정
Preferences > Languages & Frameworks > JavaScript

2.바벨 설치
1.전역 설치

 npm install -g babel-cli

2.현재 항목 은 서로 다른 babel 버 전 을 사용 하 는 경우 에 적 용 됩 니 다.

 npm install --save-dev babel-cli

3.바벨 기본 용법

#            
 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.webstorm 에서 babel 사용
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 을 선택 하고 OK 를 직접 클릭 하면 됩 니 다.
작업 이 끝 난 후 이때 JS 코드 를 수정 하면 test-copiled.js 파일 이 동시에 생 성 되 었 고 열 어 보 니 코드 가 test.js 코드 와 일치 하 는 것 을 발견 할 수 있 습 니 다.
코드 변환 규칙 을 설정 하고 계속 내 려 다 봐 야 합 니 다.↓↓↓

4.프로필 추가 .babelrcBabel 의 프로필 은 .babelrc 으로 프로젝트 의 루트 디 렉 터 리 에 저 장 됩 니 다.Babel 을 사용 하 는 첫 번 째 단 계 는 이 파일 을 설정 하 는 것 입 니 다.
이 파일 은 코드 변환 규칙 과 플러그 인 을 설정 하 는 데 사 용 됩 니 다.기본 형식 은 다음 과 같 습 니 다.

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

5.코드 변환 규칙 설정presets 필드 에서 코드 변환 규칙 을 설정 하고 정부 에서 다음 과 같은 규칙 집합 을 제공 하 며 필요 에 따라 설치 할 수 있 습 니 다.

# 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

우 리 는 es 2015 를 설치 해 야 합 니 다.명령 은 다음 과 같 습 니 다.
npm install --save-dev babel-preset-es2015
6.프로필 업데이트.babelrc
설정 파일 에 해당 하 는 규칙 을 저장 합 니 다.

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

7、완성,효과 보기
위 절차 가 완료 되면 코드 를 수정 한 후 ES6 코드 를 자동 으로 ES5 로 변환 할 수 있다.

5.사용 명령,수 동 컴 파일 코드
1.package.json 파일 변경

{
 "name": "application-name",
 "version": "0.0.1",
 "devDependencies": {
 "babel-cli": "^6.26.0" 
 },
 "scripts": {
 "build": "babel src -d lib"
 }
}

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

npm run build

3.효과
src 디 렉 터 리 에 있 는 코드 를 lib 디 렉 터 리 에 컴 파일 합 니 다.

이상 의 이 웹 스 톰 ES6 문법 지원 설정&babel 사용 및 자동 컴 파일(상세 설명)은 바로 작은 편집 이 여러분 에 게 공유 하 는 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 저 희 를 많이 사랑 해 주시 기 바 랍 니 다.