바벨 ES5는 이에 브라우저 또는 다른 환경의 실행을 달성하기 위해 널리 사용되는 코덱 ES6, ES6 코드 변환 될 수있다. 기존 환경 ES6을 지원할지 여부에 대한 걱정없이, 쓰기 프로그램 ES6 방법에 사용할 수있는이 수단.
바벨의 프로파일은 프로젝트의 루트 디렉토리에 저장, .babelrc입니다. 바벨이 구성 파일을 사용하는 첫 번째 단계 인
다음과 같이이 파일은 세트와 플러그 트랜스 코딩 규칙에 사용되며, 기본 형식은 다음과 같습니다
{ "프리셋" : [], "플러그인은" : [] } 필요에 따라 규칙 필드가 설정되어 트랜스 코딩 프리셋은 규칙의 공식 세트가 설치 될 수있다.
# 최신 트랜스 코딩 규칙 :
바벨 - 사전 - 최신 # 저장-DEV - 설치 NPM $
규칙을 트랜스 코딩 반응 :
$는 --save-dev에 - 바벨 - 반응 설치 NPM PRESET #
제안 트랜스 코딩 규칙 (네 단계의 총), 옵션 A의 다른 단계의 구문은 다음과 같습니다
--save-DEV는 바벨 - 사전 단계-0 설치 NPM $
--save-DEV는 바벨 - 사전 단계-1을 설치 한 NPM $
--save-DEV는 바벨 - 사전 단계-2를 설치 한 NPM $
--save-DEV는 바벨 - 사전 단계-3을 설치 NPM $
1. 프로필 .babelrc
그런 다음,이 규칙은 추가 .babelrc 에서 :
{
"사전"[
"최신",
"반응",
"스테이지 2"
,
"플러그인"[]
}
참고 : 다음과 같은 도구를 사용하여 모든 바벨 모듈하려면 먼저 .babelrc 작성해야합니다
명령 라인 트랜스 코딩 바벨 - CLI
바벨 - CLI 도구, 명령 줄 트랜스 코딩을 제공 바벨
(1) 글로벌 설치 : --global 바벨 - CLI를 설치 NPM을
바벨 트랜스 코딩은 글로벌 환경에서 수행. 프로젝트를 실행하려면, 지구 환경은 바벨이 있어야이 수단, 즉 환경에 따라 프로젝트입니다. 반면에, 이것은 바벨의 다른 눈길을 끄는 사용의 다른 버전을 지원하지 않습니다
기본 사용법 :
// 트랜스 코딩 출력의 결과
바벨 example.js
// 트랜스 코딩 결과를 파일에 기록됩니다
--out - 파일 compiled.js 바벨 example.js
바벨 example.js -o compiled.js
// 전체 디렉토리 트랜스 코딩
바벨 SRC - 디렉터리-OUT LIB
바벨 SRC에 -d LIB
// -s 매개 변수 생성 소스 맵 파일
바벨 SRC -d LIB -s
(2) 프로젝트 설치 바벨 - CLI
설치 : NPM은 --save-dev에 바벨 - CLI를 설치
그리고 재 작성 package.json
{
...
"devDependencies": {
"바벨-CLI" "^ 6.0.0"
}
}
3 노드 바벨
바벨-node 명령이 ES6 REPL (대화 형 파서)에 대한 지원 환경을 제공하여 바벨 - CLI 도구가 제공됩니다. 코드는 직접 실행할 수 있습니다 ES6
바벨 노드 필요는 별도로 설치할 수 있지만, 설치 바벨-CLI 수행 바벨 노드 환경과 함께 REPL 들어갈 수없는
바벨 노드 직접 ES6을 스크립트를 실행할 수 있습니다 :
바벨 노드 es6.js
바벨 노드는 프로젝트에 설치할 수 있습니다 --save-dev에 바벨 - CLI를 설치 NPM
그런 다음 재 작성 package.json
{
"스크립트": {
"secript 이름": "바벨 노드 script.js"
}
}
다른 노드를 사용하여 // 바벨 노드, 그래서 어떤 트랜스 코딩없이 script.js 자체
4. 바벨 레지스터
그 후크를 추가로 바벨 레지스터 모듈은, 명령을 재 기입 요구. 그 후, 로딩이 접미사를 필요로 할 때마다 먼저 바벨로 트랜스 코딩됩니다의 .js .jsx .es와 .es6 파일입니다.
安装 : NPM은 --save-dev에 바벨 - 레지스터를 설치
( "./하는 index.js")을 필요로;
당신이하는 index.js 트랜스 코딩에 대한 설명서를 필요가 없습니다.
참고 : 바벨 - 레지스터는 현재 파일을 트랜스 코딩됩니다보다는, 트랜스 코딩을로드 파일 명령이 필요합니다. 또한, 개발 환경에서 사용하기에 너무에만 적합, 실시간 트랜스 코딩 때문이다.
5.babel 코어
일부 코드는 API의 바벨 트랜스 코딩 사용 바벨 코어 모듈에 필요한 호출 할 필요가 있습니다
설치 : NPM은 바벨 코어 --save 설치
프로젝트의 바벨 코어 전화 :
var에 바벨 =은 ( '바벨 코어')를 필요
객체의 내용에 대한 구성 옵션, 당신은 공식 문서를 참조 할 수 있습니다 주소는 babeljs.io/docs/usage/options/입니다
6.babel-polyfill
바벨의 기본은 같은 반복자, 발전기, 설정,지도, 프록시, 반영, 기호, 약속 및 기타 전역 개체 및 전역 개체에 정의 된 메소드의 숫자로, 새로운 변환하지 않고, API를 새로운 자바 스크립트 구문 (구문)으로 변환 (예를 들어, Object.assign)은 코드 변환되지 않습니다.
설치 : NPM은 --save 바벨 - polyfill 설치
머리에 도입
수입 "바벨 - polyfill" // 或: 필요 ( "바벨-polyfill")
자세한 바벨 - 플러그인 - 변환 - 실행으로 모듈 definitions.js (바벨 기본 트랜스 코딩 API는 https://github.com/babel/babel/blob/master/packages/babel-plugin-transform-runtime 매우 큰되지 않습니다 /src/runtime-corejs3-definitions.js) :