@babel/polyfill
Babel 을 사용한다고 자바스크립트 최신 함수를 사용할 수 있는 건 아니다. 초기에 babel만 믿고 최신 함수를 사용했다가 브라우저에서 동작하지 않는 것을 보고 당황했었다. babel은 문법을 변환해주는 역할만 할 뿐이다. polyfill은 프로그램이 처음에 시작될 때 현재 브라우저에서 지원하지 않는 함수를 검사해서 각 object의 prototype에 붙여주는 역할을 한다. 즉, babel은 컴파일-타임에 실행되고 babel-polyfill은 런-타임에 실행된다.
즉, 오래된 브라우저에서도 ES6+에서 새롭게 추가된 객체나 메소드를 사용하기 위해서는 @babel/polyfill을 런타임 종속에 추가해야 한다.
| WARNING |
| 하지만... Babel 7.4.0부터 deprecated 되었다. |
Deprecated issue
- 15.10 폐지된 @babel/polyfill 대신 @babel/plugin-transform-runtime을 사용해 폴리필 추가하기
- Babel Polyfill 적용하는 방법들
- @babel/polyfill · Babel
$ npm install @babel/polyfill
npm WARN deprecated @babel/[email protected]: 🚨 This package has been deprecated in favor of separate inclusion of a polyfill and regenerator-runtime (when needed). See the @babel/polyfill docs (https://babeljs.io/docs/en/babel-polyfill) for more information.
npm WARN deprecated [email protected]: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.