How to use browserslist queries and target objects with core-js-compat to determine which polyfills are required.
Browserslist is a standard way to define a set of target browsers or runtimes using a query string. core-js integrates with browserslist through the core-js-compat package, which resolves browserslist queries into the exact set of core-js modules needed.
The targets option accepted by core-js-compat (and passed through from @babel/preset-env) accepts two formats: a browserslist query string or a plain object specifying minimum engine versions.
import compat from 'core-js-compat';const { list } = compat({ targets: 'defaults, not IE 11, maintained node versions',});
Common query examples:
// Market share threshold'> 1%'// Last N versions of each browser'last 2 versions'// Specific browsers with exclusions'defaults, not IE 11, maintained node versions'// Extended coverage'> 0.5%, last 2 versions, Firefox ESR, not dead'
Alternatively, pass an object with explicit minimum versions for each engine. All fields are optional:
const { list, targets } = compat({ targets: { android: '4.0', // Android WebView version bun: '0.1.2', // Bun version chrome: '38', // Chrome version 'chrome-android': '18', // Chrome for Android version deno: '1.12', // Deno version edge: '13', // Edge version electron: '5.0', // Electron framework version firefox: '15', // Firefox version 'firefox-android': '4', // Firefox for Android version hermes: '0.11', // Hermes version ie: '8', // Internet Explorer version ios: '13.0', // iOS Safari version node: 'current', // Node.js version; 'current' uses the running version opera: '12', // Opera version 'opera-android': '7', // Opera for Android version phantom: '1.9', // PhantomJS headless browser version quest: '5.0', // Meta Quest Browser version 'react-native': '0.70', // React Native version (default Hermes engine) rhino: '1.7.13', // Rhino engine version safari: '14.0', // Safari version samsung: '14.0', // Samsung Internet version },});
{ /** * true: target minimum ES Modules-supporting versions of all browsers, * ignoring the `browsers` key. * 'intersect': intersect the `browsers` target with browserslist's targets, * taking the maximum version. */ esmodules: true | 'intersect', // Nested browserslist query or object for browser targets browsers: '> 0.25%',}
Use the modules and exclude options to narrow the query to a subset of core-js:
const { list } = compat({ targets: '> 1%', modules: [ 'core-js/actual', // entry point (expands to all modules it covers) 'esnext.array.unique-by', // exact module name (or prefix) /^web\./, // regex matched against module names ], exclude: [ 'web.atob', ], version: '3.49', // core-js version to use; defaults to latest});
When you configure @babel/preset-env with useBuiltIns: 'usage' or useBuiltIns: 'entry', it reads your browserslist configuration and uses core-js-compat internally to determine which polyfills to inject. The targets option in @babel/preset-env accepts the same formats described above.