[React] Babel - 깊은 설정

0. 들어가면서

https://bum-developer.tistory.com/entry/React-Babel

[React] Babel

정리 이후 내용을 다루고 있다. 

 

해당 내용의 이해가 어려운 경우 먼저 읽기를 추천한다. 

 

1. 확장성과 유연성을 고려한 Babel 설정 방법

Babel 설정에 사용할 수 있는 다양한 속성 중에 extends, env, overrides 속성을 알아보자 

extends 속성을 이용하면 다른 설정 파일을 가져와 확장할 수 있고, env 또는 overrides 속성을 이용하면 

환경별 또는 파일별로 다른 설정을 적용할 수 있다. 

 

npm install @babel/core @babel/cli @babel/plugin-transform-arrow-functions @babel/plugin-transform-template-literals @babel/preset-react babel-preset-minify

준비를 위해 패키지를 먼저 설치한다. 

 

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

common 폴더를 만들고 .babelrc 파일을 만든다. 

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

1 : 플러그인에 옵션을 설정할 때 배열로 만들어서 두 번째 자리에 옵션을 넣는다. 

     템플릿 리터럴 플러그인에 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옵션은 사라진다. 

 

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

테스트용 코드를 작성하고 Babel을 실행하자. 

npx babel src/example-extends/code.js

const element = /*#__PURE__*/React.createElement("div", null, "babel test");  --- 1
const text = "element type is ".concat(element.type);                         --- 2

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

1 : 리액트 프리셋이 적용되었다. 

2 : 템플릿 리터럴 플러그인이 적용됐다. loose 옵션이 적용되지 않았기 때문에 concat 메서드가 보인다. 

3 : 화살표 함수 플러그인 적용되었다. 

 

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

env 속성을 사용해 환경별로 다른 설정값을 적용하자.  example-env 폴더 아래 .babelrc 파일을 만든다. 

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

1 : 기존과 같이 프리셋과 플러그인을 설정한다. 

2 : env 속성을 이용하면 환경별로 다른 설정을 줄 수 있다. 

3 : 프로덕션 환경에서는 압축 프리셋을 추가로 적용한다. 

 

Babel에서 현재 환경은 다음과 같이 결정된다. 

process.env.BABEL_ENV || process.env.NODE_ENV || "development"

 

프로덕션 환경에서 Babel을 실행해 보자.

• MAC : NODE_ENV=production npx babel ./src/example-env
• 윈도우 : set NODE_ENV=production && npx babel ./src/example-env

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

압축 프리셋이 적용돼서 코드를 읽기 힘들어진다. 

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

일반 개발 환경으로 실행하면 기본값 development가 사용된다. 

 

overrides 속성으로 파일별로 설정하기 

src 아래 example-overrides 폴더를 만들고 .babelrc 파일을 만든다. 

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

1 : 리액트 프리셋과 템플릿 리터럴 플러그인을 설정한다. 

2 : overrides 속성을 이용하면 파일별로 다른 설정을 할 수 있다. 

3 : service1 폴더에는 4번 속성을 적용한다. 

5 : code2.js 파일에는 4번 속성을 적용하지 않는다. 

    즉, service1 폴더 하위에서 code2.js 파일을 제외한 모든 파일에 화살표 함수 플러그인을 적용한다. 

 

example-overrides 폴더 밑에 code.js 파일을 만들고 service1 폴더를 만든 다음 code1.js와 code2.js 파일을 만든다. 

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

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

//code1.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;
};

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

code.js와 code2.js는 화살표 함수 플러그인이 적용되지 않았다. 하지만 code1.js는 화살표 함수 플러그인이 적용되었다. 

 

2. 전체 설정 파일과 지역 설정 파일

바벨 설정 파일은 크게 두 가지 종류로 나눌 수 있다. 

첫 번째는 모든 자바스크립트 파일에 적용되는 전체(project-wide) 설정 파일이다.

babel.config.js 파일이 전체 설정 파일이다. 

두 번째로 자바스크립트 파일의 경로에 따라 결정되는 지역(file-relative) 설정 파일이다.

.baberc, .babelrc.js 파일과 설정이 있는 package.json 파일이 지역 설정 파일이다.

 

바벨 7 이후 부터는 전체 설정 파일인 babel.config.js 형식으로 구성하는 것을 추천하고 있다. 

 

전체 설정 파일과 지역 설정 파일의 차이점을 한번 확인해보자면, 

const presets = ["@babel/preset-react"];
const plugins = [
  [
    "@babel/plugin-transform-template-literals",
    {
      loose: true,
    },
  ],
];

module.exports = { presets, plugins };

babel.config.js 파일을 만들었다. 리액트 프리셋과 loose 옵션을 갖는 템플릿 리터럴 플러그인을 설정했다. 

 

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

화살표 함수와 템플릿 리터럴 플러그인을 설정했다. 

 

service1 폴더 밑에 code.js 파일을 만들고 Babel을 실행해본다. 

npx babel src

const element = /*#__PURE__*/React.createElement("div", null, "babel test");  --- 1
const text = "element type is ".concat(element.type);                         --- 2

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

1 : 전체 설정 파일의 리액트 프리셋이 적용되었다. 

2 : 지역 설정 파일의 템플릿 리터럴 플러그인이 적용되었다. 

    하지만 전체 설정 파일의 loose 옵션이 적용되지 않은 것을 확인할 수 있다. 이는 지역 설정이 전체 설정을 덮기 때문

3 : 지역 설정 파일의 화살표 함수 플러그인이 적용되었다. 

 

src/service1/code.js 파일의 설정을 알아보자면 

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

 

src 폴더 아래 service2 폴더를 만들고 .babelrc와 code.js를 service1 폴더에서 그대로 복사해온다. 

그리고 package.json 파일을 npm init으로 새롭게 만들어준다. 

 

정리하자면 

test-babel-config-file

- babel.config.js

- package.json

- src 

   - service1 

      - .babelrc

      - code.js

   - service2

      - .babelrc

      - folder1

         - code.js

         - package.json

 

위와 같이 설정되어 있다.

 

npx babel src

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

// service2
const element = /*#__PURE__*/React.createElement("div", null, "babel test");
const text = "element type is " + element.type;

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

src/service2/folder1/code.js 파일의 설정을 알아보자면 

 

• package.json 파일을 만났고 package.json 파일에 babel 속성이 없으므로 지역 설정 파일은 없다. 
• 프로젝트 루트의 babel.config.js 파일이 전체 설정 파일이다. 

깃허브

https://github.com/SeoJaeWan/test-babel-config

GitHub - SeoJaeWan/test-babel-config

https://github.com/SeoJaeWan/test-babel-config-file

GitHub - SeoJaeWan/test-babel-config-file