corejs3로 대체하자

vnthf·2019년 12월 3일
1

core-js@3

  • polyfill 라이브러리, 올해 3월 공개
  • core-js는 새로운 것은 아니고 babel과 babel-polyfill에서 이미 쓰고 있던 것
  • 이제 core-js2와 core-js는 업데이트가 되지 않음
  • babel 7.4버전 이상부터 제대로 동작.
    • 정확히는 proposal 옵션
  • 현재 7.7인만큼 안정화 되었다고 판단함

기존의 polyfill

  • babel만으로는 es6의 내장메소드는 대체 불가 ex) Array.includes
  • 그래서 babel-polyfill을 추가하거나 transform-runtime(core-js와 regenerator를 포함)을 했어야 했음
  • babel-polyfill의 경우는 상단에만 넣으면 되었지만 전역변수가 오염
  • transform-runtime은 플러그인으로 추가하면 되었지만 인스턴스의 메소드는 동작하지 않았음 ([1,2,3].includes는 안되었음..)

뭐 대충 이런식으로 작성(babel 7기준)

그래서 core-js3는 어떻게?

  • 7.4부터 @babel/polyfill은 deprecated
  • core-js3를 쓰면 전역변수를 오염하지 않고 instance의 메소드도 polyfill 할 수 있음
  • 타겟을 지정하고 필요한 부분만 폴리필 코드를 추가하도록 함.

사용

  • corejs:3 옵션은 preset인 env와 plugin인 transform-runtime에서 동작하는데 둘 중 하나만 적용하면 됨

useBuiltIns-entry

  • entry옵션은 쓰는 곳에서 위와 같이 변경
  • target 에 맞게 폴리필 코드를 넣어줌

useBuiltIns-usage

  • 아래와 같이 babelrc에 사용
  • usage면 따로 소스에서 건들건 없음
  • 폴리필을 따로 추가하지 않아도 트랜스파일 시 소스에서 쓰는 폴리필을 자동으로 넣어 줌
  • compat-table을 기준으로 polyfill추가

아래는 트랜스파일 때 화면 각 소스별로 폴리필을 추가 해 줌
스크린샷 2019-12-03 오전 11.41.21.png

결론

babel7을 업데이트하고 useBuiltIns: "usage"로 polyfill로딩을 최적화

profile
6년차 프런트엔지니어

0개의 댓글