폴리필과 트랜스파일의 차이

파악한 것

https://github.com/906bc906/personal-webpack-babel-boilerplate/blob/20a8032bccebb9ea2f4ba9c19e3618c358cb8a12/sources/es11.js#L1-L6

sources/es11.js 는 es5 에서는 지원되지 않는 기능을 테스트합니다.

Optional Chaining의 경우 폴리필을 사용하지 않고도 아래와 같이 변환되는 것을 확인했습니다.

var root = document.querySelector("div#none");
root === null || root === void 0 ? void 0 : root.appendChild(document.createTextNode("Optional Chaining")); //ES6 includes method

반면 includes의 경우 폴리필을 사용하나 사용하지 않으나 코드 자체는 변환되지 않고 arr.includes(3) 와 같이 남아있었습니다.

폴리필을 사용하지 않으면 해당 코드에 오류가 발생하고, 사용하면 includes 관련 구현들이 import 되어 정상적으로 작동했습니다.

궁금한 것

폴리필과 트랜스파일의 명확한 차이를 잘 모르겠습니다.

제가 이해한 내용이 맞는지 확인 부탁드립니다.

Babel은 Javascript 컴파일러다. (자칭)
1. 트랜스파일은 컴파일의 하위 항목으로, 소스 코드를 유사한 추상화 수준의 언어의 소스 코드로 변환하는 것을 말한다.
  1. Babel-preset-env는 구문 변환 및 브라우저 폴리필을 어떻게 적용할 것인지에 대한 규칙
  2. Babel-preset-env는 폴리필이 없어도 코드를 변경하여 동작 가능한 syntax는 직접 코드를 변환해줌 (예를 들어 optional chaining)
  3. old ES에는 없어 객체나 메서드 자체를 새로 정의해야 되는 경우(예를 들어 includes) 적절한 폴리필을 추가해야 하며 babel에서 최근 권장하는 폴리필이 core-js@3

Babel은 Javascript 컴파일러다. (자칭) -> 맞습니다.

트랜스파일은 컴파일의 하위 항목으로, 소스 코드를 유사한 추상화 수준의 언어의 소스 코드로 변환하는 것을 말한다. -> 트랜스파일링의 정의 자체를 보자면 '추상화 수준의 언어의 소스 코드'일 필요는 없을것 같습니다. 바벨 트랜스파일링은 Node.js 환경에서 실행가능한 ES5 문법의 JS파일을 생성합니다.

Babel-preset-env는 구문 변환 및 브라우저 폴리필을 어떻게 적용할 것인지에 대한 규칙 / Babel-preset-env는 폴리필이 없어도 코드를 변경하여 동작 가능한 syntax는 직접 코드를 변환해줌 (예를 들어 optional chaining) -> 맞습니다.

old ES에는 없어 객체나 메서드 자체를 새로 정의해야 되는 경우(예를 들어 includes) 적절한 폴리필을 추가해야 하며 babel에서 최근 권장하는 폴리필이 core-js@3 -> 요 부분도 맞습니다! 추가로, '적절한'의 정의는 상황에 따라 바뀔수 있다는 부분도 고민하시면 좋을것 같습니다. (ex. IE에서 React를 실행하기 위해서는 core-js@3으로 충분한 폴리필이 이뤄지지 않음)

906bc906 / personal-webpack-babel-boilerplate

폴리필과 트랜스파일의 차이 #1

파악한 것

궁금한 것