[Babel] 바벨 설정 방법 (2) - (extends, env, overrides 속성)

권준혁·2020년 11월 1일

babel

Babel

목록 보기

2/4

안녕하세요 바벨설정방법에 대한 포스팅입니다!
바벨설정방법 중 extends, env, overrides속성에 대해 알아보겠습니다.

extends - 다른 설정파일을 가져와 확장할 때 사용

env

overrides

extends 속성

extends속성을 이용해서 다른 설정파일을 가져와 확장해보겠습니다.
어떤 식으로 덮어씌워지는지 보겠습니다.

설정파일 "A"

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

플러그인에 옵션을 설정하 때는 배열로 만들어서 두 번째 자리에 옵션을 넣습니다. 템플릿리터럴 플러그인의 loose옵션은 문자열을 연결할 때 concat메서드 대신에 '+'연산자를 사용합니다.

이번에는 extends속성을 이용해 방금작성한 common/.babelrc 파일을 불러올 example-extends/.babelrc 파일을 작성해보겠습니다.

설정파일 "B"

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

설정파일 B에서 A를 불러오는 형태입니다.

설정파일 A에는 preset에 대한 설정이 있기 때문에 B에서는 따로 작성할 필요가 없습니다.
A에 작성했던 "loose":true 옵션은 B의 템플릿리터럴 플러그인 설정이 이미 존재하기 때문에 확장하지 않습니다.

결과적으로 호출하는 설정파일 B가 설정에서 우선순위를 가집니다.
상속의 형태라고 생각하면 쉽습니다.

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

// CLI
npx babel example-extends/code.js

이 코드를 실행해보면 설정파일 A에서 template-literal 플러그인 설정 "loose":true가 적용되지 않았다는 것을 알 수 있습니다.

적용된 설정파일의 추상적인 형태입니다.

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

env속성

env는 환경별로 다른 설정값을 적용하는데 사용하는 속성입니다.
presets와 plugins를 아까 사용한 설정파일과 동일하게 작성하고 env속성을 추가합니다.

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

env속성에 작성한 코드를 보세요. production환경에서 minify preset(압축 프리셋)을 사용합니다.
production환경에서 바벨이 실행될 경우 기존의 react preset은 유지되고 minify preset이 추가되는 형태가 됩니다.

production 환경에서 실행해보기
```
// window CLI
set NODE_ENV=production&&npx babel ./src/example-env
```
```
// result CLI
const element=/*#__PURE__*/React.createElement("div",null,"babel test"),text="element type is ".concat(element.type),add=function(c,a){return c+a};
```
production환경에서 실행했으므로 minify preset이 적용돼 압축된 코드가 출력됩니다.

NODE_ENV 환경변수를 따로 설정하지 않으면 기본값인 development가 적용됩니다.

overrides 속성

overrides속성을 파일별로 설정할 때 사용합니다.

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

overrides속성을 보세요.
include작성한 service1폴더를 포함, exclude에 작성한 service1/code2.js를 제외하고 plugins 또는 presets의 패키지를 적용한다는 의미입니다.
결과적으론 service1폴더에서 code2.js파일만 제외하고 presets나 plugins가 적용되는 것입니다.

// result
// service1/code.js
const element = /*#__PURE__*/React.createElement("div", null, "babel test");
const text = "element type is ".concat(element.type);

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

// service1/code2.js
const element = /*#__PURE__*/React.createElement("div", null, "babel test");
const text = "element type is ".concat(element.type);

const add = (a, b) => a + b;

화살표함수 플러그인 적용이 제외된 code2.js만 화살표함수가 바벨로 컴파일이 되지 않았습니다.

정리

확장성과 유연성을 향상시키는 속성 세 가지

extends속성을 이용해 상속처럼 기존의 설정파일을 확장해 사용하고, 호출하는 설정파일에서는 새로운 설정을 재정의해서 사용할 수 있습니다.
env속성을 이용하면 앱의 실행 환경에 따라 다른 설정을 적용할 수 있습니다.
overrides를 이용하면 파일단위로 다른 설정을 적용할 수 있습니다.