Babel과 Webpack의 내부 동작 이해하기 - 2 Babel 설정

[실전 리액트 프로그래밍] babel을 사용하는 여러 방법을 직접 설정해보자!

 

바벨 설정 파일에서 사용할 수 있는 다양한 속성이 있다.

• extends: 다른 설정 파일을 가져와서 확장
• env / overrides: 환경별 또는 파일별로 다른 설정 적용

 

> extends 속성으로 다른 설정 파일 가져오기

/common/.babelrc

{
  "presets": ["@babel/preset-react"],
  "plugins": [
    [
      "@babel/plugin-transform-template-literals",
      {
        "loose": true
      }
    ]
  ]
}

plugins에 옵션을 설정할 때는 배열로 만들어서 두 번째 자리에 옵션을 넣는다.

loose 옵션을 주면 문자열을 연결할 때 concat 메서드 대신 + 연산자를 사용한다.

 

/src/example-extends/.babelrc

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

src/ 폴더의 .babelrc 에서 common/ 폴더의 .babelrc 를 부르고 있다.

두 파일에 같은 플러그인이 존재하는데,

현재 파일(src/)의 플러그인인 template-literals가 선택되고, (common/)의 loose 옵션이 사라진다.

npx babel src/example-extends/code.js

code.js를 실행해 보면,

+ 연산자가 아니라 concat 메서드를 부르고 있는 것을 확인할 수 있다.

 

 

> env 속성으로 환경별로 설정하기

/src/example-env/.babelrc

{
  "presets": ["@babel/preset-react"],
  "plugins": [
    "@babel/plugin-transform-template-literals",
    "@babel/plugin-transform-arrow-functions"
  ],
  "env": {
    "production": {
      "presets": ["minify"]
    }
  }
}

production 환경에서는 압축 프리셋을 사용하도록 설정한다.

 

set NODE_ENV=production && npx babel ./src/example-env/code.js

압축된 문자열이 나와야 한다고 하는데 왜 안 나오지,? ㅠㅠ

일단 패스..

 

> overrides 속성으로 파일별로 설정하기

/src/example-overrides/.babelrc

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

리액트 프리셋과 템플릿 리터럴 플러그인을 설정한다.

overrides 속성을 이용해서, 

service1 폴더에는 plugins를 적용하고 service1/code.js 파일에는 plugins를 적용하지 않는다.

화살표 함수 플러그인이 적용된 code1.js를 확인할 수 있다.