바벨 설정 파일은 크게 두 가지 종류로 나뉩니다. 첫 번째는 모든 자바스크립트 파일에 적용되는 전체 설정 파일입니다. 바벨 버전 7에 추가된 babel.config.js 파일이 전체 설정 파일입니다.

두번째는 자바스크립트 파일의 경로에 따라 결정되는 지역 설정 파일입니다. .babelrc, .babelrc.js 파일과 바벨 설정이 있는 package.json 파일이 지역설정 파일입니다.

전체 설정 파일

• babel.config.js

지역 설정파일

• babelrc
• babelrc.js
• 바벨 설정이 있는 package.json

전체 설정 파일

// root/babel.config.js
const presets = ['@babel/preset-react'];
const plugins = [
  [
    '@babel/plugin-transform-template-literals',
    {
      loose: true,
    },
  ],
];

module.exports = { presets, plugins };

리액트 프리셋과 loose 옵션을 갖는 템플릿 리터럴 플러그인을 설정했습니다.

지역 설정 파일

// src/service1/.bablerc
{
  "plugins": [
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-template-literals"
  ]
}

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

npx babel src 명령어를 실행합니다.

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

전체 설정 파일의 리액트 프리셋이 적용됐고, 지역 설정파일의 템플릿 리터럴 플러그인이 적용됐습니다. 하지만 전체 설정 파일의 loose 옵션이 적용되지 않았습니다. 이는 지역 설정이 전체 설정을 덮어쓰기 때문입니다. 즉, 지역 설정 파일의 화살표 플러그인이 적용되었습니다.

만약 지역설정 파일이 없다면 전체 설정 파일만 적용됩니다.