FE 개발에서 바벨(Babel)을 사용하는 프로젝트들이 많다 보니 간접적으로 혹은 직접적으로 브라우저스리스트(Browserslist) 까지 사용하는 경우가 생길 수 있습니다.

Browserlist는 무엇인가?

브라우저스리스트는 브라우저를 선택하는 옵션 기능만 따로 뽑아 놓은 도구라고 생각하시면 됩니다. 어떤 프로그램이 브라우저에 대응해 내부에서 처리해야 할 작업이 다르다면 옵션으로 지원 브라우저 환경을 입력받을 수 있는데요, FE는 그런 옵션이나 설정이 필요한 경우가 많습니다. 반복해서 만들게 되는 그 설정 기능만 따로 떼어서 브라우저 환경을 쉽게 정의할 수 있고 또 쉽게 코드에서 사용할 수 있도록 만든 도구입니다.

그 자체만으로는 특별한 기능이 없습니다. 다른 프로그램에서 사용되기 위한 프로그램입니다. 프레임워크나 빌드 같은 데에서 사용하는데, 바벨에서는 브라우저에 따라 사용해야 할 폴리필의 내용이나 빌드 결과가 달라집니다. 그래서 바벨은 바벨을 사용하는 프로젝트의 대응 브라우저 환경을 입력받아야 하는데 그때 browserslist가 사용됩니다.

*browserslist 는 브라우저 환경을 정의할 때 쿼리라는 간단한 문법을 사용합니다. 대응할 브라우저와 버전을 쉽게 정의할 수 있습니다.*

명시적으로 브라우저와 버전을 특정할 수도 있고 최신 버전 2개 뭐 이런 식으로 정의를 할 수 있습니다. 심지어 브라우저 사용 통계를 사용해 세계에서 점유율이 5% 이상인 브라우저들만 선택할 수도 있습니다.

이 통계 정보는 API 서버에서 가져오는 것이 아니고, caniuse-lite 라는 브라우저 사용통계나 버전 정보를 들고 있는 프로젝트의 정적인 데이터를 사용합니다. 그래서 browserlist 를 사용할 때마다 caniuse-lite 데이터를 자주 업데이트합니다. browserslist 가 주는 정보는 빌드 할 때나 한 번 필요한 것이라 그걸로 충분합니다.

Browserslist: caniuse-lite 는 오래되었습니다.

최근에 parcel 번들러로 빌드하는 과정에서 다음과 같은 메시지가 나타났습니다.

<aside> ⚠️ Browserslist: caniuse-list is outdated. Please run : npx browserslist@latest --update-db -> Browserslist: caniuse-list 는 오래되었습니다. 다음 명령을 실행하십시오

</aside>

브라우저가 오래된 경우 사용자에게 표시하기 위해 browserslist 를 사용하고 있습니다.(eslint-plugin-compat 과 같은 개발 중에도 이를 사용합니다.)

그래서 사용자는 최신의 브라우저 상태로 업데이트를 해주어야 하기 때문에 다음 명령어를 수행해야 합니다.

$ npx browserslist@latest --update-db