Babel (바벨)

Babel

: cross browsing 문제를 해결하기 위해 만들어졌으며, 

ECMAScript2015+ (ES6) 이후 코드들은 모든 브라우저에서 동작하도록 호환성을 지켜준다.

Typescript, react 등 다른 스크립트들에 대해서도 동작하게 한다.

 

 

• 바벨 3단계 빌드

1. Parsing (파싱) : 코드를 각 토큰별로 분해
2. Transforming (변환) : ES6을 ES5로 변환
3. Printing (출력)

 

---

 

 

1. 설치

 

터미널

npm install @babel/core @babel/cli

> @babel/cli : babel의 터미널 도구 

 

app.js

const alert = msg => window.alert(msg); //ES6 기준으로 작성된 코드

 

 

 

2. 바벨 실행

 

터미널

• 터미널에서 npx로 실행 (주로 사용)

npx babel app.js 

 

• node_modules 에 babel 폴더가 생기며 실행

node_modules ./bin/babel

 

 

 

3. 바벨 플러그인

: babel plugin은 바벨 빌드 단계 중 변환 단계를 담당한다.

 

- 커스텀 바벨 플러그인

babel-plugin.js

module.exports = function myBabelPlugin() {
	return {
    	visitor : {
        	identifier(path) {
            	const name = path.node.name; //parsing 결과 객체에 접근
                console.log(name);
                path.node.name = name.split("").reverse().join("");
                //소스코드의 문자열을 역순으로 변환
            }
        }
    }
}

 

터미널

npx babel app.js --plugin './babel-plugin.js'

 

 

 

 

- ES6을 ES5 로 변환하는 커스텀 플러그인을 만들기

 

babel-plugin.js

module.exports = function myBabelPlugin() {
	return {
    	visitor : {
			VariableDeclaration(path) {
				console.log(path.node.kind);
				if(path.node.kind == 'const') {
					//ES6의 const 를 ES5의 var 로 변경
					path.node.kind = 'var';
				}
			}
		}
	}
}

 

> 실행결과

: const -> var 로 코드 변경됨.

app.js

const alert = msg => window.alert(msg); //before

var alert  = msg => window.alert(msg); //after

 

 

 

 

 

4. Babel Plugin 이용하기

 

- plugin-transform-block-scoping

: 변수선언 코드를 변환

 

설치

npm install @babel/plugin-transform-block-scoping

 

실행

npx babel app.js --plugin @babel/plugin-transform-block-scoping

 

> 실행결과

: app.js

var alert = msg => window.alert(msg);

커스텀 바벨 대신, 변수선언 코드만 변환하려면 plugin-transform-block-scoping 설치해서 변환한다.

 

 

 

 

 

- plugin-transform-arrow-functions

: arrow 함수를 변환

 

설치

npm install @babel/plugin-transform-arrow-functions

 

실행

npx babel app.js --plugin @babel/plugin-transform-block-scoping 
--plugin @babel/plugin-transform-arrow-functions

> block-scoping 과 arrow-functions 둘 다 호출

 

> 실행결과

: app.js

var alert = msg => window.alert(msg); //before

var alert = function(msg){ //after
	return window.alert(msg);
}

arrow 함수 ( => ) 가 function() 함수로 변경되었다.

 

 

 

 

 

- plugin-transform-strict-mode

: use-strict 플러그인

( use-strict는 ECMAScript5 에서부터 지원하며, 엄격모드를 사용한다. (strict-mode 플러그인 사용))

 

설치

npm install @babel/plugin-transform-strict-mode

 

실행

npx babel app.js --plugin @babel/plugin-transform-block-scoping 
--plugin @babel/plugin-transform-arrow-functions 
--plugin @babel/plugin-transform-strict-mode

 

> 실행결과

: app.js

"use-strict"; //엄격모드 브라우저로 동작

var alert = function(msg){
	return window.alert(msg);
}

 

 

 

 

 

5. 바벨 설정파일 생성

root 경로에 babel.config.js 생성

 

babel.config.js

module.exports = {
  plugins : [
  '@babel/plugin-transform-block-scoping',
  '@babel/plugin-transform-arrow-functions',
  '@babel/plugin-transform-strict-mode',
  ]
}

 

터미널

npx babel app.js

 

 

 

 

 

6. Preset (프리셋)

: ES6 코드를 위해 플러그인을 여러개 설치하는 것은 비효율적임으로, 이를 모두 지원하는 프리셋을 이용한다.

 

- 커스텀 프리셋

root 경로에 babel-preset.js 생성

 

babel-preset.js

module.exports = function myBabelPreset(){
  return {
    plugins : [
    '@babel/plugin-transform-block-scoping',
    '@babel/plugin-transform-arrow-functions',
    '@babel/plugin-transform-strict-mode',
    ]
  }
}

babel.config.js

module.exports = {
  presets : [ //preset 정의
  './babel-preset.js',
  ]
}

 

> 실행결과

: app.js

"use-strict";
var alert = function(msg){
	return window.alert(msg);
}