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

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

extends 속성을 사용하면 다른 설정 파일을 가져와 사용할 수 있습니다.

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

플러그인에 옵션을 설정할 때는 배열로 만들어서 두 번째 자리에 옵션을 넣는다. 템플릿 리터널 플러그인에 loose 옵션을 주면 문자열을 연결할 때 concat 메서드 대신 + 연산자를 사용한다.

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

1. extends 속성을 사용하여 다른 파일에 있는 설정을 가져옴.
2. 가져온 설정을 플러그인에 추가
3. 템플릿 리터럴 플러그인은 가져온 설정에 이미 존재하는데 이때 플러그인 옵션은 현재 파일 옵션으로 결정됩니다. 따라서 loose 속성은 사라집니다.

// src/example-extends/code.js
const element = <div>babel test</div>;
const test = `element type is ${element.type}`;
const add = (a, b) => a + b;

npx babel src/example-extends/code.js 명령어로 바벨을 실행하면 loose 속성이 적용이 되지 않은것을 확인할 수 있습니다.

const element = React.createElement("div", null, "babel test");
const test = "element type is ".concat(element.type);
const add = function (a, b) {
  return a + b;
};

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

이번에는 환경별로 다른 설정 값을 적용하는 방법입니다.

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

1. env 속성을 이용하면 환경별로 다른 설정을 줄 수 있습니다.
2. production 환경에서는 압축 프리셋을 사용하도록 설정했습니다. 이전에 설정한 리액트 프리셋에 압축 프리셋이 추가되는 형태입니다.

NODE_ENV=production npx babel ./src/example-env production 환경으로 바벨을 실행 시킵니다.

const element=React.createElement("div",null,"babel test"),test="element type is ".concat(element.type),add=function(c,a){return c+a};

production 환경에서는 압축 프리셋이 적용되었습니다.

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/code2.js 파일에는 적용하지 않습니다.