babel 사용 및 설치 설정 튜 토리 얼

간단 한 소개
babel 은 ES6 코드 를 ES5 코드 로 바 꾸 어 기 존 환경 에서 실행 할 수 있 는 광범 위 하 게 사용 되 는 컨버터 입 니 다.이 는 기 존 환경 이 지원 하 는 지 걱정 하지 않 고 ES6 로 프로그램 을 만 들 수 있다 는 뜻 입 니 다.
설치 및 설정
4.567914.또는 4.567914.타 오 바 오 미 러 를 사용 하여 설치 하 는 것 이 빠 릅 니 다.
STEP:항목 진입=>cnpm install babel-cli--save-dev
왜 전역 에 설치 하지 않 습 니까?
전체 국면 에 설치 하면 프로젝트 가 실행 되 려 면 전체 환경 에 bable 이 있어 야 한 다 는 것 을 의미한다.즉,프로젝트 가 환경 에 대한 의존 이 생 겼 다 는 것 이다.다른 한편,이렇게 해도 서로 다른 프로젝트 가 서로 다른 버 전의 babel 을 사용 하 는 것 을 지원 할 수 없다.
코드 변환 규칙 설정
루트 디 렉 터 리 아래 설치:cnnpm install babel-cli --save-dev 설치 가 완료 되면 프로필 을 만 듭 니 다.babelrc 이 파일 은 프로젝트 루트 디 렉 터 리 에 두 어야 합 니 다.기본 형식 은:

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

presets 필드 는 디 코딩 규칙 을 설정 하고 plugins 는 설정 한 babel 플러그 인 입 니 다.그리고 파일 설정:

{
  "presets":["es2015"]
}

여기까지,babel 에 대한 기본 설정 이 완료 되 었 습 니 다.
인 스 턴 스 데모:
프로젝트 루트 디 렉 터 리 에 demo.js 만 들 기

let a = 5;
const b = 10;
let input = [1,2,3];
input.map(item => item+1);

현재 디 렉 터 리 에 babel 을 설치 하고 있 기 때문에 터미널 에서 babel 변환 명령 을 직접 사용 할 수 없습니다.npm 로 실행 해 야 하기 때문에 먼저 packge.json 에서 작성 하 십시오.

{
 "devDependencies": {
  "babel-cli": "^6.26.0",
  "babel-preset-es2015": "^6.24.1"
 },
 "scripts":{
   "build":"babel demo.js"
 }
}

루트 디 렉 터 리 에 들 어가 서cnpm install babel-cli --save-dev실행,결 과 를 봅 니 다.

지정 한 디 렉 터 리 로 출력 할 수도 있 습 니 다.

{
 "devDependencies": {
  "babel-cli": "^6.26.0",
  "babel-preset-es2015": "^6.24.1"
 },
 "scripts":{
   "build":"babel demo.js --out-file bunder.js"
 }
}

루트 디 렉 터 리 에 들 어가 서pm install babel-preset-es2015 --save-dev실행,결 과 를 봅 니 다.

이번 에는 루트 디 렉 터 리 에서 컴 파일 된 bunder.js 파일 을 찾 을 수 있 습 니 다.
폴 더 캡 처

총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 babel 의 사용 및 설치 설정 튜 토리 얼 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!