browserslist란?

1. 개요

언제부턴가 브라우저스리스트(browserslist)라는 개념이 자주 눈에 띄더니, 이제는 프론트엔드 개발 환경에서 뺄 수 없는 도구가 되었다. 아마도 바벨(Babel)이라는 프론트엔트 계의 걸출한 스타 프로젝트에서 도입했기 때문일 것이라는 관측이 있다.

 

 

 

2.Browserslist란?

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

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

 

browserslist는 브라우저 환경을 정의할 때 쿼리라는 간단한 문법을 사용한다. 대응할 브라우저와 버전을 쉽게 정의할 수 있다. (밑에서 다룸) 심지어 브라우저 사용 통계를 사용해 세계에서 점유율이 5%이상인 브라우저들만 선택할 수도 있다. 이 통계 정보는 API 서버에서 가져오는 것이 아니다. caniuse-lite라는 브라우저 사용 통계나 버전 정보를 들고 있는 프로젝트의 정적인 데이터를 사용한다. 그래서 browserslist를 사용할 때마다 caniuse-lite 데이터를 자주 업데이트한다. (browserslist가 주는 정보는 빌드할 때나 한 번 필요한 것이라 그걸로 충분할 것 같다.)

 

 

 

3. Browserslist의 쿼리

3.1 쿼리 예시

browserslist는 쿼리라는 문법을 사용해 브라우저를 정의할 수 있다. 쿼리는 꽤 직관적으로, 쉽게 이해가 가능하다.

 

아래와 같이 명시적으로 인터넷익스플로러(IE) 버전 10을 지원하겠다고 쓸수 있고,

ie 10

 

또는 다음과 같이 버전의 범위를 지정할 수도 있다. (IE 6에서 9까지 지원)

ie 6-9

 

 

쿼리에 대한 자세한 정보는 공식 사이트를 참고할 수 있다.

 

 

 

3.2 쿼리를 정의하는 방법

browserslist의 쿼리를 정의하는 방법은 다음과 같다.

1. .browserslistrc 파일 안에 정의

 > 1%
last 2 versions
not ie <= 10

 

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

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

 

 

3.3 쿼리 디버깅

입력한 쿼리가 정상적으로 동작하고 있는지도 바로 확인할 수 있다.

쿼리가 정의된 파일이 있는 경로에서 아래의 CLI명령어를 입력하면 된다.

npx browserslist

 

---

#References

https://byul91oh.tistory.com/450

https://blog.shiren.dev/2020-12-01/