Transpiler 대 Polyfill

트랜스파일러

Babel은 트랜스파일러입니다. 온라인 replBabel repl을 확인하세요.

Babel은 우리의 코드를 브라우저, 특히 이전 버전에서 이해할 수 있는 코드로 변환합니다.

예를 들어 다음 코드를 변환합니다.

let total = 10;
let sum = total ?? 100;

에게

"use strict";

let total = 10;
let sum = total !== null && total !== void 0 ? total : 100;

따라서 새로운 기능?? Nullish 연산자를 Nullish 연산자가 무엇인지 모르는 브라우저를 위해 이해할 수 있는 코드로 변환한다는 의미입니다.

그것은 트랜스 파일러로 알려져 있습니다

폴리필

polyfill은 일반적으로 이전 브라우저에서 작동하는 코드를 작성한다는 의미입니다.
예를 들어 코드에서 함수Number.isNaN를 사용하려는 이 예제를 보고 사용하기 전에 이 코드 조각을 작성합니다.

// These method is a sample of making polyfill
if (!Number.isNaN) {
  Number.isNaN = function isNaN(x) {
    return x!==x;
  };
}

웹사이트CanIUse에서Number.isNaN를 확인하면 IE 브라우저는 지원하지 않는데 새 브라우저에서는 잘 되는 것을 볼 수 있습니다. 따라서 해당 코드 조각으로 먼저 브라우저에서 작동하는지 여부를 확인하고 사용할 수 없는 경우 동등한 코드 조각을 작성하므로 이전 브라우저에서 코드가 중단되지 않습니다.
우리가 폴리필을 작성하고 싶다면 이와 같은 많은 기능과 기능이 있다는 것을 알고 있습니다.
그들 모두를 위해 쓸까요? 분명히 불가능합니다.

그래서 그것을 관리하는 유명한 도서관이 있습니다.
예를 들어 core-js는 모든 구형 브라우저에 대해 거의 모든 새로운 기능을 지원하는 polyfill 라이브러리입니다.

설치하고 가져온 다음 브라우저 지원에 대한 걱정 없이 코드를 작성하기만 하면 됩니다.

import 'core-js/actual/array/from';       // <- at the top of 
import 'core-js/actual/set'; 

Array.from(new Set([1, 2, 3, 2, 1]));  

그래서 어떤 방법을 선호합니까? 당신의 이유도 들어보자