Browserslist와 함께 기준 사용

Tony Conway
Jeremy Wagner

게시: 2025년 5월 7일, 최종 업데이트: 2025년 9월 17일

Browserslist는 프런트엔드 코드 베이스에서 지원되는 최소 브라우저 버전을 구성하는 데 가장 많이 사용되는 도구 중 하나입니다. 개발자는 package.json 파일 (또는 .browserslistrc 파일과 같은 Browserslist의 기타 구성 지점)에 browserslist 쿼리를 추가하고 Browserslist는 지원되는 최소 브라우저 목록을 노출합니다. Browserslist는 다음과 같은 다양한 인기 있는 린트, 폴리필, 패키징 도구와 함께 사용할 수 있습니다.

기준 타겟

Baseline을 사용하기로 결정한 경우 사용자층을 고려하여 타겟팅할 Baseline 기능 세트를 결정해야 합니다.

  • Baseline Widely available에는 30개월 전에 Baseline 핵심 브라우저 세트에서 완전히 지원한 모든 웹 기능이 포함됩니다.
  • 기준 연도 기능 세트(예: 기준 2020)에는 지정된 연도 말에 새로 제공된 모든 기능이 포함됩니다.

사용자층에 따라 널리 제공되는 기준을 타겟팅할 수도 있고, 이전 기준 연도를 타겟팅해야 할 수도 있습니다. 분석 또는 RUM 도구를 참고하여 사용자가 사용하는 브라우저 버전을 파악하세요.

기준 새로 출시 또는 널리 제공을 타겟팅하는 방법

기준선 지원은 몇 가지 다른 쿼리를 통해 Browserslist에 내장되어 있습니다. 새로 출시된 기준 브라우저를 타겟팅하려면 Browserslist 구성에서 baseline newly available를 지정하세요.

{
  ...
  "browserslist": [
    "baseline newly available"
   ]
  ...
}

baseline widely available를 쿼리로 지정할 수도 있습니다.

{
  ...
  "browserslist": [
    "baseline widely available"
   ]
  ...
}

기준 연도를 타겟팅하는 방법

기준 연도 기능 세트를 타겟팅하려면 2024년 기능 세트를 타겟팅하는 경우와 같이 baseline 2024와 같은 쿼리에 연도를 지정합니다.

"browserslist": "baseline 2024"

baseline 2015부터 현재 연도까지 지정할 수 있습니다.

다운스트림 브라우저를 지정하는 방법

기준 핵심 브라우저 세트에는 Chrome, Edge, Firefox, Safari가 포함됩니다. 다른 브라우저는 Chrome 및 Edge와 동일한 오픈소스 코드인 Chromium을 기반으로 하며, 구현된 Chromium 버전에 따라 동일한 기능 세트를 지원해야 합니다. 기준 구성에 이러한 브라우저를 포함하려면 기준 쿼리 뒤에 with downstream를 추가하세요. 예를 들어 Baseline Widely available의 일부로 다운스트림 브라우저를 타겟팅하려면 baseline widely available with downstream를 지정합니다.

"browserslist": "baseline widely available with downstream"

baseline newly available with downstream도 유효한 쿼리이며, 연간 목표에 with downstream를 추가하는 것도 마찬가지입니다.

"browserslist": "baseline 2024 with downstream"

실제 사용 중인 기준 쿼리의 예

패키징 도구

프로젝트에서 Browserslist에서 제공하는 기준 쿼리를 사용하면 즉각적인 효과를 볼 수 있습니다. Babel은 JavaScript를 패키징하는 데 사용되는 인기 있는 빌드 도구입니다. @babel/preset-env 패키지 기본값을 사용하는 경우 많은 최신 JavaScript API와 메서드가 이전 브라우저에 필요한 더 자세한 구문으로 대체됩니다.

test.js라는 JavaScript 파일에서 npm run build 명령어가 실행되었음을 보여주는 터미널 세션 출력 파일 크기는 12KB입니다.

하지만 동일한 예제 프로젝트에서 baseline 2020 쿼리를 사용하여 2020 기능 세트를 타겟팅하면 필요한 구문 변환이 적기 때문에 이 JavaScript의 출력 크기가 크게 줄어듭니다.

babel이 Baseline 2020을 타겟팅하도록 설정된 경우 npm run build 명령어가 이제 1.5KB 파일을 생성함을 보여주는 두 번째 터미널 세션

Google Chrome Labs baseline-demos 저장소의 예시 코드를 사용하여 직접 시도해 보세요.

린터

일부 린터는 이미 Browserslist와 호환되거나 호환성 모듈을 사용하여 Browserslist와 호환되도록 만들 수 있습니다. 예를 들어 stylelint는 stylelint-browser-compat 모듈을 사용하여 browserslist 구성을 사용할 수 있습니다. 선택한 기준 쿼리를 사용하도록 stylelint.config.js 파일을 설정합니다.

module.exports = {
  plugins: ['stylelint-browser-compat'],
  rules: {
    'plugin/browser-compat': [
      true,
      {
        browserslist: ['baseline widely available'],
      },
    ],
  },
};

이제 Stylelint는 현재 널리 사용되는 기준에 포함되지 않은 CSS에 플래그를 지정합니다.

이전 브라우저에서 작동하지 않는 CSS 코드를 강조 표시하는 Stylelint의 경고 목록

Stylelint는 기준 규칙을 직접 설정할 수 있는 플러그인도 제공하지만 이미 Browserslist를 사용하여 구성을 처리하고 있다면 Browserslist에서 제공하는 기본 기준 쿼리를 사용하는 것이 적합한 해결책입니다.