바벨이란

입력과 출력이 모두 js인 컴파일러, JSX typescript 코드압축 등 역할

바벨을 실행하는 여러가지 방법

1. @babel/cli로 실행
2. webpack에서 babel-loader로 실행
3. @babel/core로 직접 실행
4. @babel/register로 실행

@babel/cli로 실행

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

	//npx babel src/code.js --presets=@babel/preset-react 
    //--plugins=@babel/plugin-transform-template-literals,@babel/plugin-transform-arrow-functions
 

babel 설정

1. babel 6까지는 .babelrc로 관리
2. babel 7부터는 babel.config.js로 관리

babel.config.js

const presets = ["@babel/preset-react"];
const plugins = [
  "@babel/plugin-transform-arrow-functions",
  "@babel/plugin-transform-template-literals"
];

module.exports = { presets, plugins };

Webpack의 babel-loader로 실행

wepack.config.js

const path = require("path");

module.exports = {
  entry: "./src/code.js", // 번들링 할 파일 지정
  output: {
    path: path.resolve(__dirname, "dist"), // 번들링 된 결과를 저장할 경로
    filename: "code.bundle.js" // 번들링 된 파일 명
  },
  module: {
    rules: [{ test: /\.js$/, use: "babel-loader" }] // 바벨 설정은 babel.config.js를 사용
  },
  optimization: { minimizer: [] } // 압축기능 끄기, 디폴트로는 압축기능 활성화 되어있음
};

babel/core로 직접 실행

const babel = require("@babel/core");
const fs = require("fs");

const filename = "./src/code.js";
const source = fs.readFileSync(filename, "utf8"); // fs함수 안쓰면 그냥 콘솔에 출력
const presets = ["@babel/preset-react"];
const plugins = [
  "@babel/plugin-transform-arrow-functions",
  "@babel/plugin-transform-template-literals"
];
const { code } = babel.transformSync(source, {
  filename,
  presets,
  plugins,
  configFile: false
});
console.log(code);

// node ./src/babelCoreExec.js

// 바벨 컴파일 순서
// 1. 파싱 : 입력된 코드로부터 코드구문분석된트리(AST) 생성
// 2. 변환 : AST를 원하는 형태로 변환
// 3. 생성 : AST를 코드로 출력

확장성과 유연성을 고려한 바벨 설정 방법

1. extends : 다른 설정 파일 가져와서 확장
2. env : 환경별로 다른 설정 적용
3. overrides : 파일별로 다른 설정 적용

폴리필

오래된 브라우저를 지원할 때 사용, 런타임에 기능을 주입하는 걸 말함.
런타임 시 기능이 있는지 없는지 조사해 없으면 기능을 주입함.
폴리필에 관한 설정은 바벨 설정과 별도로 해주어야 함.

모든 폴리필 사용하기

// 모든 폴리필 적용하기
import '@babel/polyfill';

const p = Promise.resove(10);
const obj = {
a: 10,
b: 20,
c: 30,
};
const arr = Object.values(obj);
const exist = arr.includes(20);

// 웹펙에서 @babel/polyfill 적용한 예
module.expors = {
entry : ['babel/polyfill', './src/index.js'],
//...
}

core-js 모듈에서 필요한 폴리필만 가져오기

import 'core-js/features/promise';
import 'core-js/features/object/values';
import 'core-js/features/array/includes';

const p = Promise.resolve(10);
const obj = {
a: 10,
b: 20,
c: 30,
};
const arr = Object.values(obj);
const exist = arr.includes(20);

@babel/preset-env 이용하기

const presets = [
  "@babel/preset-react",
  [
    "@babel/preset-env",
    {
      targets: {
        chrome: "40"
      },
      useBuiltIns: "entry"
      // 폴리필 관련설정 - 지원하는 브라우저에서 필요한 폴리필만 포함시킴
    }
  ]
];
const plugins = [
  "@babel/plugin-transform-arrow-functions",
  "@babel/plugin-transform-template-literals"
];

module.exports = { presets, plugins };

import "@babel/polyfill";

const p = Promise.resolve(10);
const obj = {
  a: 10,
  b: 20,
  c: 30
};
const arr = Object.values(obj);
const exist = arr.includes(20);