Babel polyfill - core-js 에 대하여
React Boilerplate 를 작성할 때 사용하던 babel polyfill 에 대해서 깊게 알아봤다.
useBuiltIns 옵션에 있는 usage 와 entry 가 단순히 usage 는 필요한 polyfill 만 추가로 넣어주니까 이것만 사용하면 되겠다 싶었고 이전 프로젝트에서는 그대로 사용했다.
지금 사용중인 react ts boilerplate 에서 최근 코드스쿼드 슬랙에서 앨런이 공유해준 ES2022 문법중 하나인 at 메서드를 사용해보려는 과정에서 오류가 났었다.
이유는 core-js 를 다운받지 않아서 였다. 그래서 단순히 다운을 받아서 해결했다.
문득 궁금했다. core-js 를 왜 다운받아야 하는거지? node_modules 에 dependency 로 다운받아져있을 법한데..
그런데 core-js-pure 는 무엇인지, 굳이 core-js 와 함께 다운받아져 사용되어야 하는지 의문이 들었다.
core-js-pure 는 어떤것에 의해서 다운받아졌는지 package-lock.json 을 통해 확인해보니 @babel/runtime-corejs3 에 의해서 다운받아지고 있었다.
"node_modules/@babel/runtime-corejs3": {
"version": "7.18.3",
"resolved": "<https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.18.3.tgz>",
"integrity": "sha512-l4ddFwrc9rnR+EJsHsh+TJ4A35YqQz/UqcjtlX2ov53hlJYG5CxtQmNZxyajwDVmCxwy++rtvGU5HazCK4W41Q==",
"dev": true,
"peer": true,
"dependencies": {
"core-js-pure": "^3.20.2",
"regenerator-runtime": "^0.13.4"
},
"engines": {
"node": ">=6.9.0"
}
},
@babel/runtime-corejs3 은 aria-query 의 require 모듈이었고, aria-query 는 airbnb eslint 설정을 위해 다운받았던 eslint-config-airbnb 의 peer dependency 중 하나인 eslint-plugin-jsx-a11y 의 require 모듈이었다.
"aria-query": {
"version": "4.2.2",
"resolved": "<https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz>",
"integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
"dev": true,
"peer": true,
"requires": {
"@babel/runtime": "^7.10.2",
"@babel/runtime-corejs3": "^7.10.2"
}
},
...
"eslint-plugin-jsx-a11y": {
"version": "6.5.1",
"resolved": "<https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.5.1.tgz>",
"integrity": "sha512-sVCFKX9fllURnXT2JwLN5Qgo24Ug5NF6dxhkmxsMEUZhXRcGg+X3e1JbJ84YePQKBl5E0ZjAH5Q4rkdcGY99+g==",
"dev": true,
"peer": true,
"requires": {
"@babel/runtime": "^7.16.3",
"aria-query": "^4.2.2",
"array-includes": "^3.1.4",
"ast-types-flow": "^0.0.7",
"axe-core": "^4.3.5",
"axobject-query": "^2.2.0",
"damerau-levenshtein": "^1.0.7",
"emoji-regex": "^9.2.2",
"has": "^1.0.3",
"jsx-ast-utils": "^3.2.1",
"language-tags": "^1.0.5",
"minimatch": "^3.0.4"
}
},
...
"node_modules/eslint-config-airbnb": {
"version": "19.0.4",
"resolved": "<https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-19.0.4.tgz>",
"integrity": "sha512-T75QYQVQX57jiNgpF9r1KegMICE94VYwoFQyMGhrvc+lB8YF2E/M/PYDaQe1AJcWaEgqLE+ErXV1Og/+6Vyzew==",
"dev": true,
"dependencies": {
"eslint-config-airbnb-base": "^15.0.0",
"object.assign": "^4.1.2",
"object.entries": "^1.1.5"
},
"engines": {
"node": "^10.12.0 || ^12.22.0 || ^14.17.0 || >=16.0.0"
},
"peerDependencies": {
"eslint": "^7.32.0 || ^8.2.0",
"eslint-plugin-import": "^2.25.3",
"eslint-plugin-jsx-a11y": "^6.5.1",
"eslint-plugin-react": "^7.28.0",
"eslint-plugin-react-hooks": "^4.3.0"
}
},
어찌되었건, core-js-pure 라는 것이 다운받아졌으니 이걸 활용할 방법이 없을까? 를 찾아보다가 카카오 테크 블로그 글을 참고하여 활용할 수 있었다.
core-js 와 core-js-pure 의 차이는 아래와 같았다.
- core-js : preset-env 프리셋의 useBuiltIns 옵션과 같이 쓰임, 전역 스코프 오염 가능성
- core-js-pure : 전역 스코프를 오염시키지 않음, @babel/plugin-transform-runtime 과 함께 쓰임
이렇게 쓰다보니 궁금증이 든게 왜 @babel/polyfill 은 deprecated 되었을까? 란 생각이 들었다, 왜 runtime 이라는 용어와 같이 쓰이는건지? 전역 스코프가 오염된다는게 무슨의미인지?
관련 내용으로 포스팅도 하려고 하다보니 계속 궁금한게 생겨서 꼬리물기 식으로 공부를 하면서 오늘 하루를 보냈다.
오픈소스 첫 PR 과 merge
Babel 공식문서를 읽다가 링크를 타려고 보니 facebook 에서 관리하는 regenerator 레포지토리의 브랜치명과 디렉터리 명이 바뀌어서 404 를 내는 링크가 있었다.
포스팅하다가 잠시 지치기도 했고, 오타 수정정도야 시간이 오래걸리는 일도 아니고, 오픈소스에 기여해보는 방법도 머리로는 아니까 한번 시도해볼까? 싶었다. 일단 babel 웹페이지가 오픈소스 인지부터 확인했다. website 라는 레포지토리에 md 로 관리를 하고 있어서 바로 실행으로 옮겼다.
PR 이 활발한 레포지토리는 아닌 걸로 보여서 merge 되려면 한참 걸리겠거니~ 생각하고 있었는데 5분도 안돼서 merge 가 됐다.
단순히 링크수정을 위한 PR 이었지만 내가 직접 쓰고있는 오픈소스에 첫 PR 을 보내고 merge 가 됐다는 사실이 신기하고 두근두근했다.
