browserslist / browserslistrc 사용법

react등 프론트 개발시 허용하는 브라우져 구조 설정이 필요한 경우가 있습니다.

가벼운 프로젝트의 경우 설정을 package.json에 하는 경우가 대부분이지만,
브라이져 설정이 나눠져 따로 관리를 하는 경우가 많습니다.

언젠가부터 브라우저스리스트(browserslist)라는 것이 자주 눈에 띄더니 지금은 FE 개발 환경에서 뺄 수 없는 도구가 되었어요. 아마도 바벨(Babel)이라는 FE 계의 걸출한 스타 프로젝트에서 도입했기 때문일 거라고 생각합니다.

😎 Browserslist가 뭘까

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

😎 쿼리

브라우저스리스트는 쿼리라는 문법을 사용해 브라우저를 정의할 수 있습니다. 쿼리는 꽤 직관적이라 쉽게 이해할 수 있어요.
명시적으로 인터넷익스플로러(IE) 버전 10을 지원하겠다고 대놓고 쓸 수 있고요.

ie 10

버전의 범위를 지정할 수도 있어요.

ie 6-9

IE 6에서 9까지 지원한다는 뜻입니다. 근데 인간적으로 IE 6부터 10까지는 버립시다. 웹개발자들을 애껴주세요.
쿼리는 not을 사용해 부정조건을 만들 수 있어요.

not ie 6-10

IE 6부터 10까지는 절대로 지원하지 않겠다는 쿼리에요. 좋죠? 예전엔 브라우저 특성을 잘 이해하는게 내 밥그릇이라고 생각했는데 지금 생각해보면 그 시간에 그딴것보다 다른 스킬을 키우는게 더 행복했을것 같아요. 네 TMI 네요.
IE관련 설정은

not ie <= 10

이렇게 특정 버전 이하는 지원하지 않겠다는 형태의 쿼리가 좋다고 생각해요.
브라우저스리스트에서 제일 신박했던 기능이 있는데 바로 사용 통계를 기반으로 한 브라우저 선택입니다.

 > 2%

전 세계 점유율 2% 이상의 브라우저만 지원한다는 뜻인데 국가 코드와 함께 특정 국가나 아시아와 같은 지역도 선택할 수 있어요.

 > 2% in KR
 > 2% in alt-AS

첫번째는 한국에서 점유율 2% 이상인 브라우저들을 선택하는 것이고 두번째것은 아시아 지역 전체의 점유율 2%를 뜻해요.
그리고 자주 쓰이는 쿼리가 하나 더 있습니다.

last 2 versions

최근 2개 버전의 브라우저를 선택하는 쿼리입니다. 대부분 메이저 버전을 기준으로 합니다. 한국의 경우 보통 모던 브라우저는 거의 최신 버전을 지원하면서 IE만 선택적으로 지원하게 되는데 이 쿼리하고 IE 지원 범위 쿼리만으로 대부분 커버가 될 거예요. 브라우저 이름까지 넣어서 조금 더 세부적으로 정의할 수도 있지만 이렇게까지 할 필요가 있는 프로젝트는 자주 없을 것 같아요.

last 2 Chrome versions
last 2 Firefox versions

그리고 가장 골칫거리인 것이 바로 지원이 중단된 브라우저들일 텐데요. 지원이 중단된 브라우저들은 간단히 제외할 수도 있어요.

not dead

dead는 지원이 중단된 브라우저를 뜻해요 그래서 not dead 이렇게 하면 지원이 중단되지 않은 브라우저만 지원하겠다는 뜻이에요. 한국에서는 종종 지원이 중단된 브라우저도 지원해야 할 경우가 있어서 무심코 사용하다간 큰일 날 수 있어요.
그리고 쿼리를 조합할 수도 있습니다.

 > 1%, last 1 versions
 > 1% and last 1 versions

or, and 조건을 사용할 수 있습니다. or의 경우 콤마로 대신할 수 있어요. > 1%, last 1 versions는 점유율 1% 이상과 최신 버전 1개를 선택하는 것이고 > 1% and last 1 versions 이건 점유율 1% 이상이면서 최신 버전인 것만 선택합니다.

😎 쿼리를 정의하는 방법

쿼리는 두 가지 방법으로 정의할 수 있습니다.

1. .browserslistrc 파일안에 정의
2. package.json 파일에 browserslist 키를 사용해 정의

.browserslistrc 파일을 사용하는 방법이 제일 간단해요.

 > 1%
last 2 versions
not ie <= 10

프로젝트 루트에 .browserslistrc 파일을 만드시고 위와 같이 입력하면 됩니다. 그냥 바쁘신 분들은 위 내용 복붙해서 IE 부분만 프로젝트 상황에 맞게 조절해 주시면 웬만하면 바로 쓸 수 있는 쿼리라고 생각하시면 될 것 같습니다. 라인으로 구분되는 쿼리들은 or 조건인데 not은 and 조건으로 동작하는 것 같아요.
package.json 파일을 이용하는 방법은 공식 사이트에서도 권장하는 방법이에요. package.json에 browserslist키를 사용해 배열로 정의합니다.

"browserslist": [
  "> 1%”,
  "last 2 versions",
  “not ie <= 10”
]

저의 경우 browserslistrc 파일 안에 IE의 관한 정의가 없어 추가해줘야하는 상황 이었습니다!

# https://github.com/browserslist/browserslist#readme

>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
Firefox ESR
iOS >= 12
Safari >= 12
not Explorer <= 11

기존 browserslistrc 에 ie 11추가 하여 간단히 해결했습니다.
처음 보는 구조라 불안했지만 매우 간단하고 큰의미없는.. 파일이었습니다.

# https://github.com/browserslist/browserslist#readme

>= 0.5%
last 2 major versions
not dead
Chrome >= 60
Firefox >= 60
Firefox ESR
iOS >= 12
Safari >= 12
not Explorer <= 11
ie 11

😎 쿼리 디버깅

입력한 쿼리가 정상적으로 동작하고 있는지 바로 확인할 수 있어요. 쿼리가 정의된 파일이 있는 경로에서 커맨드라인으로 아래와 같이 입력하면 됩니다.(파일이 없는 경로에서는 디폴트 쿼리를 적용해요)

npx browserslist

결과는 쿼리에 대응되는 브라우저 목록이 출력됩니다. 만약 지원하는 브라우저가 목록에 없다면 쿼리를 수정하셔야 해요.

and_chr 86
and_ff 82
and_qq 10.4
and_uc 12.12
android 81
baidu 7.12
bb 10
bb 7
chrome 86
chrome 85
edge 86
edge 85
firefox 82
firefox 81
ie 11
ie_mob 11
ie_mob 10
ios_saf 14
ios_saf 13.4-13.7
ios_saf 12.2-12.4
kaios 2.5
op_mini all
op_mob 59
op_mob 12.1
opera 72
opera 71
safari 14
safari 13.1
samsung 12.0
samsung 11.1-11.2

아까 입력했던 쿼리의 2020년 11월 29일의 결과입니다. 브라우저 사용 통계를 사용하기 때문에 시간에 따라 바뀔 수 있겠죠?