[Babel] 바벨 설정 방법 (1) - 전체설정파일 , 지역설정파일

안녕하세요! 바벨 설정파일이 가지는 범위에대한 포스팅입니다.
바벨 설정파일의 종류에는 어떤 것들이 있을까요?

• 전체 설정파일 (project-wide)

• babel.config.js
  • 지역 설정파일 (file-relative)
• .babelrc
• .babelrc.js
• 바벨 설정이 담긴 package.json

실습해보면서 설치한 패키지들입니다.

    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "@babel/plugin-transform-arrow-functions": "^7.8.3",
    "@babel/plugin-transform-template-literals": "^7.8.3",
    "@babel/preset-react": "^7.9.4"

---

전체설정파일

먼저 전체설정파일을 먼저 생성해보겠습니다.
프로젝트 루트디렉토리에 babel.config.js를 생성하겠습니다.

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

프리셋은 리액트를 사용하고, 플러그인은 템플릿리터럴 플러그인을 사용하며, 이 프러그인에 loose옵션을 줬습니다.

---

지역설정파일

다음은 지역설정파일을 생성하겠습니다.
루트디렉토리에 src폴더를 생성하고, 하위에 service1디렉토리를 생성합니다. 그리고 그 안에 .babelrc 지역설정파일을 생성합니다.

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

.babelrc 지역설정파일에서는 플러그인에 대해서만 두 가지 플러그인을 설정했습니다.

동일한 경로에 code.js라는 테스트할 파일을 작성하겠습니다.

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

이 코드를 컴파일할텐데, 당연한 결과지만 전체설정파일과 지역설정파일이 병합되면서 지역설정파일이 전체설정파일을 덮어씌웁니다.
동일한 플러그인이나 프리셋에 대한 설정이 있다면 지역설정파일이 전체설정을 덮어씌웁니다.

컴파일 결과

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;
};

컴파일 결과에서는 전체설정파일에서 loose:true 옵션이 덮어씌워져 사라진 것을 알 수 있습니다.
concat메서드가 사용되고 있습니다.
그리고, 프리셋설정은 그대로 유지됩니다.

---

.babelrc파일과 트리구조

예시

test-babel-config-file
└-babel.config.js
└-package.json   // 전체설정파일
│
└-src
   └-service1
   │    └-.babelrc  // 지역설정파일
   │    └-code.js
   │
   └-service2
        └-.babelrc  // 지역설정파일
        └-folder1
           └-code.js
           └-package.json   // babel속성이없음

컴파일 할 수 있는 code.js파일은 현재 2개입니다.

• src/service1/code.js
• src/service2/folder1/code.js

트리구조의 상위레벨로 올라가며 지역설정파일들을 찾습니다.
상위레벨은 경로상의 상위디렉토리를 따라 올라가면됩니다.

ⓐsrc / ⓑservice1 / code.js

• 첫 번째 code.js는 순서대로 service1폴더의 지역설정파일ⓑ, src폴더의지역설정파일ⓐ, 최종으로 루트폴더의 전체설정파일을 찾게됩니다.
  가까운 지역설정파일의 설정이 가장 우선순위를 가지며 병합됩니다.

ⓐsrc / ⓑservice2 / ⓒfolder1 /code.js

• 두 번째 code.js는 순서대로 folder1의 지역설정파일ⓒ , service2의 지역설정파일ⓑ, src폴더의 지역설정파일ⓐ, 최종으로 루트폴더의 전체설정파일을 찾습니다.

package.json은 babel속성이 없다면 바벨 지역설정파일이 아닙니다.

전체설정파일을 우선 작성한 뒤, 필요한 위치마다 지역설정파일을 "컴파일할 코드와 동일한 경로"에 작성을 해두면 설정파일의 유연성이 향상됩니다!

여기까지 간단한 포스팅 마치겠습니다.
읽어주셔서 감사합니다.