BabelJS-Babel 7을 사용한 프로젝트 설정

최신 버전의 Babel, 7은 이미 존재하는 패키지를 변경하여 출시되었습니다. 설치 부분은 Babel 6의 경우와 동일하게 유지됩니다. Babel 7의 유일한 차이점은 모든 패키지를 다음과 같이 설치해야한다는 것입니다.@babel/, 예 : @ babel / core, @ babel / preset-env, @ babel / cli, @ babel / polyfill 등

다음은 babel 7을 사용하여 만든 프로젝트 설정입니다.

명령

프로젝트 설정을 시작하려면 다음 명령을 실행하십시오-

npm init

다음 패키지 설치

npm install --save-dev @babel/core
npm install --save-dev @babel/cli
npm install --save-dev @babel/preset-env

여기에 package.json이 생성되었습니다.

이제 .babelrc 루트 폴더의 파일-

폴더 생성 src/ 및 파일 추가 main.js 그것에 코드를 작성하여 es5로 변환하십시오.

src / main.js

let add = (a,b) => {
   return a+b;
}

트랜스 파일 명령

npx babel src/main.js --out-file main_es5.js

main_es5.js

"use strict";

var add = function add(a, b) {
   return a + b;
};

Babel 7의 작동은 Babel 6과 동일합니다. 유일한 차이점은 @babel을 사용한 pacakge 설치입니다.

바벨 7에서 더 이상 사용되지 않는 사전 설정이 있습니다. 목록은 다음과 같습니다.

ES20xx 사전 설정
babel-preset-env
babel-preset-latest
Babel의 스테이지 사전 설정

또한 패키지의 연도가 제거되었습니다. @babel/plugin-transform-es2015-classes 지금 @babel/plugin-transform-classes

typescript로 작업하는 예제를 하나 더보고 typescript preset과 babel 7을 사용하여 Es2015 JavaScript로 변환합니다.

typescript로 작업하려면 typescript 패키지를 다음과 같이 설치해야합니다.

npm install --save-dev @babel/preset-typescript

창조하다 test.ts 파일에 src/ 폴더를 열고 typescript 형식으로 코드를 작성하십시오-

test.ts

let getName = (person: string) => {
   return "Hello, " + person;
}

getName("Siya");

.babelrc

명령

npx babel src/test.ts --out-file test.js

test.js

"use strict";

var getName = function getName(person) {
   return "Hello, " + person;
};

getName("Siya");