바벨 속성

바벨 설정 파일에서 사용할 수 있는 다양한 속성중에 extends, env, overrides에 대해 알아보려 한다.

extends

extends의 뜻처럼 기존 설정을 가져와서 연장하는 것이다.

만약 동일한 플러그인이 연장되면 기존 플러그인의 옵션은 현재 플러그인의 옵션으로 덮어써진다

아래처럼 extends에 덮어쓸 설정 파일을 가져오고 필요한 설정값을 입력해 주면 된다.

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

env

이것도 뜻처럼 환경별로 다른 설정값을 적용할 때 이용한다.

env에 개발환경에 따라 설정값을 다르게 설정해 주면 된다.

아래는 production 환경일때 압축 프리셋을 추가한것이다.

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

📌 맥에서 프로덕션으로 실행: NODE_ENV=production npx babel [폴더 경로]

overrides

파일별로 다른 설정을 할때 이용한다

아래 코드는 같은 폴더내의 파일에 리액트 프리셋과 템플릿 리터럴을 적용하고,

service1 폴더에도 위의 설정을 적용하고 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"]
    }
  ]
}

바벨 설정 범위

바벨에서 파일을 위한 설정은 다음과 같이 결정된다

• package.json, .babelrc, .babelrc.js 파일을 만날 때 까지 부모 폴더로 이동한다.
• 프로젝트 루트의 babel.config.js 파일이 전체 설정 파일이다
• 전체 설정 파일과 지역 설정 파일을 병합한다.

📌 한마디로 정리하면 프로젝트 루트의 babel.config.js는 전체 설정 파일이고 가장 가까운 부모 루트에 있는 나머지 설정파일로 전체 설정 파일을 덮어서 해당 파일의 설정을 적용시키는 것이다.

참고: 실전 리액트 프로그래밍