[babel 정리] feat. 실전 리액트 프로그래밍

1. 바벨의 기능

   1) ECMA6이상의 버전을 ECMA5로 변환해주는 자바스크립트 컴파일러

   2) 코드압축, JSX문법, 타입스크립트와 같은 정적인 언어, Proposal 단계에 있는 문법 등을 사용 할 수 있다.

2. 사전 설치 준비물

   1) 핵심인 @babel/core

2. 바벨을 실행하는 여러가지 방법

  1) @babel/cli로 실행하기

  2) 웹팩에서 babel-loader로 실행하기

  3) @babel/core를 직접 실행하기

  4) @babel/register로 실행하기

3. cli로 실행하기

   먼저 예제에 필요한 플러그인을 설치한다. 

npm install @babel/core @babel/cli @babel/plugin-transform-arrow-functions 
@babel/plugin-transform-template-literals @babel/preset-react

 설치 후 ex.js 파일을 src폴더 밑에 만든 후 아래와 같이 입력해보자.

const element = <div>babel test</div>;
const text = `element type is ${element.type}`;
const add = (a,b) => a+b;

 그리고 실행하자. 결과는 아래와 같이 나올 것이다.

node src/code.js

const element = React.createElement("div", null, "babel test");
const text = "element type is ".concat(element.type);

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

 

4. babel-loader로 실행하기

5. babel/core로 실행하기

//babel core로 실행하기
const babel = require('@babel/core');
const fs = require('fs');
const filename = './src/code.js';
const source = fs.readFileSync(filename, 'utf8');
const presets = ['@babel/preset-react'];
const plugins = [
    '@babel/plugin-transform-template-literals',
    '@babel/plugin-transform-arrow-functions',
];

const {code} = babel.transformSync(source,{filename, presets, plugins, configFile : false});
console.log(code);

//babel core로 실행하기
const babel = require('@babel/core');
const fs = require('fs');

const filename = './src/code.js';
const source = fs.readFileSync(filename, 'utf8');
const presets = ['@babel/preset-react'];

const {ast} = babel.transformSync(source,{
    filename, 
    ast:true,
    code : false,
    presets, 
    configFile : false
});
const {code : code1} = babel.transformSync(ast,source,{
    filename, 
    plugins:['@babel/plugin-transform-template-literals'], 
    configFile : false
});
const {code : code2} = babel.transformSync(ast,source,{
    filename, 
    plugins:['@babel/plugin-transform-arrow-functions'], 
    configFile : false
});

console.log('code1:\n',code1);
console.log('code2:\n',code2);

 

컴파일 시 3단계를 거친다.

파싱(입력된 코드로 부터 AST를 생성) => 변환(AST를 원하는 형태로 변환) => 생성(AST를 코드로 출력)

*AST : abstract syntax tree

 

6. scability 와 flexibility를 고려한 바벨 설정방법

extends, env, overrides 기능을 이용하여 확장하거나 유연성을 높일 수 있다.

1) extends

루트폴더에 common폴더를 만들고 바벨 설정파일(.babelrc)을 만든다.

{
    "presets" : ["@babel/preset-react"],
    "plugins" : [
        [
            "@babel/plugin-transform-template-literals",
            {
                "loose" : true //concat 메서드 대신에 +연산자 사용
            }
        ]
    ]
}

루프폴더에 src 폴더만들고 그 밑에 폴더 하나 생성한다. 그리고 그 폴더 밑에 바벨 설정파일을 하나 만든다.

그리고 테스트용 code.js 파일도 하나 만들고 위에서 사용한 예제를 그대로 사용한다.

{
    "extends" : "../../common/.babelrc",
    "plugins" : [
        "@babel/plugin-transform-arrow-functions",
        "@babel/plugin-transform-template-literals"
    ]
}

extends 부분은 기존 바벨 설정파일을 가져올 곳을 의미한다.

그리고 플러그인에 기존에 설정된 파일을 덮어쓰고 옵션을 주지 않으면?  바벨을 실행시키면 당연히 옵션이 적용되지 않는다.

왜?? 두번째에서 옵션적용을 제거했기 때문에 적용되지 않는다.

2) env

env를 이용하면 환경별로 다른 설정값을 적용할 수 있다. 마찬가지로 src폴더 밑에 폴더하나 만들고 바벨 설정파일 + code.js파일을 만든다.

{
    "presets": ["@babel/preset-react"],
    "plugins" : [
        "@babel/plugin-transform-template-literals",
        "@babel/plugin-transform-arrow-functions"
    ],
    "env":{ //env 속성이용하면 환경별로 다른 설정 줄 수 있음.
        "production":{
            "presets":["minify"]
        }
    }
}

 production 모드에서는 압축프리셋을 적용을 설정하고, 실행해보자

NODE_ENV=production npx babel ./src/example-env

아마 읽기 힘들게 나올 것이다. 

개발환경에서 실행하면 기존값과 똑같이 나온다.

3) overrides

위의 방법과 같은 방법으로 바벨 설정, 테스트파일을 두개 (code.js, code2.js)만든다.

{
    "presets": ["@babel/preset-react"],
    "plugins" : [
        "@babel/plugin-transform-template-literals"
    ],
    "overrides":[
        {
            "include" : "./service1",
            "exclude" : "./service1/code2.js",
            "plugins" : [
                "@babel/plugin-transform-arrow-functions"
            ]
        }
    ]
}

code2에는 적용되지 않는 것을 볼 수있다.