[Babel.js] 플러그인 적용 (2)

• 이 방법은 각각 선택해서 변경 할 수 있는 방법이다.

babel plugin

1. 설치

   $ npm i -D @babel/core @babel/cli

2. 소스 파일 작성(EX6)

플러그인 적용

1. 블록 스코프 변수 변환(@babel/plugin-transform-block-scoping)
2. $ npm i -D @babel/plugin-transform-block-scoping $ npx babel src/ex01.js -o dist/ex01.01.js --plugins @babel/plugin-transform-block-scoping $ cat dist/ex01.01.js
3. 객체분해-파라미터 변환(@babel/plugin-transform-parameters)
4. $ npm i -D @babel/plugin-transform-parameters $ npx babel src/ex01.js -o dist/ex01.02.js --plugins @babel/plugin-transform-parameters $ cat dist/ex01.02.js
5. 템플릿 문자열 변환(@babel/plugin-transform-template-literals)
6. $ npm i -D @babel/plugin-transform-template-literals $ npx babel src/ex01.js -o dist/ex01.03.js --plugins @babel/plugin-transform-template-literals $ cat dist/ex01.03.js
7. for..of 변환(@babel/plugin-transform-for-of)
8. $ npm i -D @babel/plugin-transform-for-of $ npx babel src/ex01.js -o dist/ex01.04.js --plugins @babel/plugin-transform-for-of $ cat dist/ex01.04.js
9. 모든 변환 적용
10. $ npx babel src/ex01.js -o dist/ex01.all.js --plugins @babel/plugin-transform-block-scoping --plugins @babel/plugin-transform-parameters --plugins @babel/plugin-transform-template-literals --plugins @babel/plugin-transform-for-of $ cat dist/ex01.all.js

예제 (블록 스코프 변수 변환)

기존코드

'use strict'

// 블록 스코프 변수(ES6)
const users = [{
    no: 0,
    name: '마이콜',
    email: 'michol@gmail.com'
},{
    no: 1,
    name: '둘리',
    email: 'dooly@gmail.com'
}];

// 객체분해-파라미터(ES6)
function print({no, name, email}) {
    // 템플릿 문자열(ES6)
    console.log(`${no}: ${name} : ${email}`);
}

// for..of(ES6)
for(let user of users) {
    print(user);

**변환코드

'use strict'; 
// 블록 스코프 변수(ES5) 로 변환 되었다.
var users = [{
  no: 0,
  name: '마이콜',
  email: 'michol@gmail.com'
}, {
  no: 1,
  name: '둘리',
  email: 'dooly@gmail.com'
}]; // 객체분해(ES6)

function print({
  no,
  name,
  email
}) {
  // 템플릿 문자열(ES6)
  console.log(`${no}: ${name} : ${email}`);
} // for..of(ES6)


for (var user of users) {
  print(user);
}