Skip to content

4. BabelPolyfillEnv.md

Latest commit

 

History

History
89 lines (72 loc) · 2.36 KB

4. BabelPolyfillEnv.md

File metadata and controls

89 lines (72 loc) · 2.36 KB

BabelPolyfillEnv

polyfill

  • 폴리필(polyfill)은 런타임에 기능을 주입하는 것을 말한다.
  • 런타임에 기능이 존재하는지 검사해서 기능이 없는 경우에만 주입한다.
  • 바벨을 사용하면 최신 자바스크립트 표준에 추가된 모든 기능을 사용할 수 없다.
  • 바벨을 사용하더라도 폴리필에 대한 설정은 별도로 설정해야 한다.
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);
  • 하지만, 필요하지 않은 폴리필까지 포함되어 번들 파일의 크기가 커진다.
  • webpack에서도 설정할 수 있다.
const path = require("path");

module.exports = {
  entry: ["@babel/polyfill", "./src/code.js"],
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "code.bundle.js",
  },
  module: {
    rules: [{ test: /\.js$/, use: "babel-loader" }],
  },
  optimization: { minimizer: [] },
};

core-js

  • @babel/polyfill 패키지는 내부적으로 core-js 패키지를 이용한다.
  • @babel/polyfill 패키지를 사용하지 않고 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

  • @babel/preset-env 프리셋은 실행환경에 대한 정보를 설정해 주면 자동으로 필요한 기능을 주입해 준다.
  • useBuiltIns: "entry" => 지원하는 브라우저에서 필요한 폴리필만 포함시킨다.
  • useBuiltIns: "usage" => 해당 코드에서 사용된 기능의 폴리필만 추가 된다.
const presets = [
  [
    "@babel/preset-env",
    {
      targets: {
        chrome: "40",
      },
      useBuiltIns: "entry",
    },
  ],
];

module.exports = { presets };
npx babel src/code.js
  • 자바스크립트는 동적 타입 언어이기 때문에 바벨 입장에서 타입 추론하기 까다롭다.
  • 타입스크립트와 같은 정적 타입 언어를 사용한다면 이런 문제를 비교적 쉽게 해결할 수 있다.