Babel 과 Jest

[yejineee]

✔ Jest

• proces.env.NODE_ENV는 test이다.

✔ Babel

플러그인 Plugins

• 바벨의 코드 변환은 plugin을 설정함으로써 이루어진다.
• 플러그인이 프리셋보다 먼저 변환된다.
• 플러그인은 순서대로 변환된다.

프리셋 Presets

• set of babel plugins and/or config options : 플러그인과 옵션 모아둔 것
• 프리셋은 역순으로 변환된다.

@babel/preset-env

• 최신 JS를 쓸 수 있게 해주는 프리셋
• 타겟 설정을 위해서 .browserslistrc 파일에 타겟을 설정하라.
• targets
  • 프로젝트의 타겟 environment를 설정할 수 있다.
  • browserlist도 없고 Target 설정도 되어있지 않으면?
    • ⚠️ default를 사용하지 않음.! 명시적으로 default라고 지정해주어야 한다.
    • 모든 ES6-ES2020 code를 ES5와 같이 사용할 수 있도록 변화시켜버림. -> 추천 X
• useBuiltIns
  • core-js의 글로벌 버전을 사용할 때 최적화를 시켜주는 옵션이다.
  • corejs 옵션에 어떤 버전을 사용할 것인지 명시해주어야 한다.
  • "entry" : 타겟 environment module에서 필요한 것만 import하는 것으로 대체한다.

    • In

      import 'core-js/stable';

    • out : chrome 71이 타겟이면, 위의 import는 아래 import로 대체된다.

      import "core-js/modules/es.array.unscopables.flat";
      import "core-js/modules/es.array.unscopables.flat-map";
      import "core-js/modules/es.object.from-entries";
      import "core-js/modules/web.immediate";

  • "usage" : 이 파일에서 사용하는 feature이고 target environment에서 지원하지 않는 것에 대한 폴리필을 import하는 것을 파일의 최상단에 추가한다.

    • In

      // first file:
      var set = new Set([1, 2, 3]);
      
      // second file:
      var array = Array.of(1, 2, 3);

    • Out

      // first file:
      import 'core-js/modules/es.array.iterator';
      import 'core-js/modules/es.object.to-string';
      import 'core-js/modules/es.set';
      var set = new Set([1, 2, 3]);
      
      // second file:
      import 'core-js/modules/es.array.of';
      var array = Array.of(1, 2, 3);

Config Option

• envName
  • default : process.env.BABEL_ENV || process.env.NODE_ENV || "development"
  • envName 값은 env config에서 사용된다.
  • api.env() 함수를 사용하면 envName을 알 수 있다.
• env
  • { [envKey]: Options }
  • envKey는 envName 옵션에 사용된 값이다.
  • envKey에 해당하는 env라면, 그 안의 Option은 root object에서 설정한 옵션과 머지된다.
• useBuiltiIns
  • @babel/preset-env가 폴리필을 어떻게 처리할 것인지를 설정하는 옵션
  • usage or entry를 사용하면 preset-env는 직접 core-js 모듈을 참조한다.

Babel은 어떻게 옵션들을 Merging 하는가

• Optioin은 preset과 그 값이 undefined가 아니면, 기존 존재하는 option을 대체한다.
• [예외 1] - assumtions, parserOpts, generatorOpts : 기존 것들과 머지된다. (대체x)
• [예외 2] - plugins과 presets : 같은 이름일 경우 대체되고, 유니크한 것들은 머지된다.