babel setting

Babel

• babel 7.4 이후 버전 기준으로 정리한 내용입니다.
• 셋팅 내용만 보실려면 정리 부분을 참고 바랍니다.
• https://github.com/royleej9/javascript/tree/master/babel-webpack

---

설정 파일

• 프로젝트 전제 설정
  • babel.config.json
• 개별 설정
  • .babelrc.json
  • 메인 프로젝트에 하위 여러개의 프로젝트가 있는 경우

---

@babel/core

• JavaScript compiler - 코드 분석/ 변환 작업
• 플러그인/preset 설정이 없을 경우 빌드를 실행해도 포맷팅만 변경됐을뿐 원본과 거의 동일함

설치

npm install --save-dev @babel/core

---

@babel/cli

• 터미널에서 babel 실행할수 있는 도구

설치

npm install --save-dev @babel/cli

실행

// src의 js 파일을 분석 후 lib 폴더로 저장
babel  src --out-dir  lib

결과

• 변환 형식 옵션이 없기 때문에 포맷 스타일을 제외한 결과는 원본과 동일함

// before
const fn = () => 1;

// after
const fn = () => 1;

---

core-js

• 최신 표준 자바스크립트 기능에 대한 구현체
• 모듈식 구성으로 필요한 기능만 쉽게 로딩 가능
• 전역 네임 스페이스를 오염시키지 않고 사용 가능

---

@babel/polyfill

• core-js 기능에 대한 래퍼 패키지 / core-js 와 regenerator-runtime 기능을 import 역할

• 마이그레이션이 쉽지 않아서 7.4 이후 deprecated 됨

  @babel/polyfill is a wrapper package which only includes imports of stable core-js features (in Babel 6 it also included proposals) and regenerator-runtime/runtime, needed by transpiled generators and async functions. This package doesn't make it possible to provide a smooth migration path from core-js@2 to core-js@3: for this reason, it was decided to deprecate @babel/polyfill in favor of separate inclusion of required parts of core-js and regenerator-runtime.

• polyfill/core-js를 사용 할 때 @babel/preset-env 와 useBuiltIns 설정 없이 사용할 경우 필요하지 않는 부분도 코드에 포함되기 때문에 파일 용량이 커질수 있다.

// 대신
import "@babel/polyfill";

// 아래 처럼 사용
import "core-js/stable";
import "regenerator-runtime/runtime";

---

@babel/preset-env

• ECMAScript 2015+ 코드를 실행 환경에 맞는 javascript 버전 코드로 변환하는 법을 babel에 전달

• ECMAScript 2015+ 코드를 변환하는 여러 플러그인의 모음 / 필요한 플러그인만 설치도 가능

설치

npm install --save-dev @babel/preset-env

실행

babel src --out-dir lib --presets=@babel/env

• 아래와 같은 옵션을 설정시 대상 브라우저에서 사용할 수 없는 기능에 대한 변환 플러그인만을 로드함

// 아래 두 명령 실행 결과는 동일함
// 플러그인을 지정
babel src --out-dir lib --presets=@babel/env
// 설정 파일 적용시
babel src --out-dir lib

설정파일 (1)

// file - .babelrc.json
{
  presets: [
    [
      '@babel/env',
      {
        targets: {
          edge:  '17',
          firefox:  '60',
          chrome:  '67',
          safari:  '11.1',
        },
      },
    ],
  ],
};

결과

// before
const fn = () => 1;

// after
var fn = function fn() {
  return 1;
};

설정파일 (2)

• @babel/preset-env 설정에서도 polyfill 을 지원함
• coreejs의 version은 추가된 기능을 위해 minor 버전 지정을 추천 : version:3 -> version:3.6
• useBuiltIns: usage/entry
  • usage: 필요한 polyfills만 import
  • entry: target 환경 에 필요한 전체 polyfills 을 import / 한개의 entry 파일을 지정 후 사용 권장. core-js/stable / regenerator-runtime/runtime을 import 필요

{
  "presets": [
    [
      "@babel/preset-env",
      {
        ...
        "debug": true,
        "useBuiltIns": "usage",
        "corejs": {
          "version": 3.6,
          "proposals": true
        }
      }
    ]
  ]

// usage 옵션 적용 전 결과
"use strict";
var test = function test(param) {
  console.log(param);
};
var Rectangle = function Rectangle(height, width) {
  this.height = height;
  this.width = width;
};
var a = new Promise();

// usage 옵션 적용 후 결과
("use strict");
require("core-js/modules/es.object.to-string");
require("core-js/modules/es.promise");
var test = function test(param) {
  console.log(param);
};
var Rectangle = function Rectangle(height, width) {
  this.height = height;
  this.width = width;
};
var a = new Promise();

---

transform-runtime

• 코드 중복 문제 해결

  • babel은 공통 기능에 대해서 작은 helper 들을 사용. 파일이 여러개로 구성된 경우 중복 문제가 발생

  • polyfill 이 필요한 부분을 plugin-transform-runtime 을 사용하여 runtime을 참조할수 있도록 변환 하여 중복 문제 해결

  • "foobar".includes("foo") 같은 인스턴스 메소드는 @babel/runtime-corejs3 부터 가능

• global scope 오염 방지

  • core-js 또는 @babel/polyfill 을 직접 import해서 생기는 global scope 오염 문제를(Promise, Set Map..) sandboxed 환경을 생성하여 해결
  • app / command line tool 개발일때는 괜찮지만 library 형식으로 개발하여 배포될때 실행되는 환경을 제어할수 없을때 생기는 문제 등을 해결 할수 있음

설치

npm install --save-dev @babel/plugin-transform-runtime

// core-js 3버전
npm install --save @babel/runtime-corejs3

설정

• corejs

  corejs	설치 명령
  false	npm install --save @babel/runtime
  2	npm install --save @babel/runtime-corejs2
  3	npm install --save @babel/runtime-corejs3

// 옵션 기본 값
// file - package.json
{
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": false, // false/2/3
        "helpers": true,
        "regenerator": true,
        "useESModules": false,
        "version": "7.0.0-beta.0"
      }
    ]
  ]
}

---

정리

설치

npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/plugin-transform-runtime
npm install --save core-js@3 @babel/runtime-corejs3

설정

• 명령어 실행을 쉽게 하기위해 package.json에 등록

// file - package.json
  "scripts": {
    "babel": "babel src --out-dir lib"
  },

• 명령어로 실행

npm run babel

• babel 설정 파일

// file - babel.config.json
{
  "presets": [
    [
      "@babel/preset-env",
      {
        "loose": true,
        "targets": {
          "ie": "8",
          "chrome": "76"
        },
        "debug": true,
        "useBuiltIns": "usage",
        "corejs": {
          "version": 3.6, // 설치된 core-js 버전으로
          "proposals": true
        }
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "absoluteRuntime": false,
        "corejs": 3,
        "helpers": true,
        "regenerator": true,
        "useESModules": false
      }
    ]
  ]
}

---

참고 자료

https://babeljs.io/docs/en/usage
core-js@3, babel and a look into the future