How to use browserslist - 10 common examples

function getBrowserVersionFromUserAgent(agent) {
  var browserName = getBrowserName(agent);
  var version = (browserName === 'ios_saf'
    ? agent.os.version
    : agent.browser.version || agent.os.version || ''
  ).split('.');
  while (version.length > 0) {
    try {
      return browserslist(browserName + ' ' + version.join('.'))[0];
    } catch (e) {
      // Ignore unknown browser query error
    }
    version.pop();
  }
  return 'unknown';
}

// eslint-disable-next-line import/no-extraneous-dependencies
import browserslist from 'browserslist'

// prints to terminal list of browsers that matches browserlist config file
// eslint-disable-next-line no-console
console.log(browserslist())

// prints to terminal total users coverage for selected browsers
// eslint-disable-next-line no-console
console.log(`coverage: ${browserslist.coverage(browserslist())}%`)

.then(res => {
    // console.log(JSON.stringify(res))
    const match = exactMatch(alfy.input, res.data)

    if (match) {
      const supportTable = new SupportTable({
        featureId: match,
        db: res,
        browsersList: browserslist(browsersListConfig)
      })

      return alfy.output(supportTable.alfredItems)
    } else {
      const featureSelectionList = filterFeatures(alfy.input, res)
      return alfy.output(featureSelectionList)
    }
  })
  .catch(alfy.error)

function updateBrowserslist() {
  console.log(chalk.whiteBright('Checking browserslist'));
  console.log();
  const data = browserslist.readConfig(BROWSERSLIST_PATH);
  const production = browserslist(null, {
    env: 'production-template',
    config: BROWSERSLIST_PATH,
  });

  const d = diff.diffArrays(data.production, production);
  d.forEach(part => {
    // green for additions, red for deletions
    // grey for common parts
    if (part.added) {
      console.log(chalk.green(part.value.join('\n')));
    } else if (part.removed) {
      console.log(chalk.red(part.value.join('\n')));
    } else {
      console.log(chalk.grey(part.value.join('\n')));
    }

.then(filePath => {
          if (filePath == null) {
            return Promise.reject();
          }
          const pkg = JSON.parse(fs.readFileSync(filePath));
          pkg['browserslist'] = defaultBrowsers;
          fs.writeFileSync(filePath, JSON.stringify(pkg, null, 2) + os.EOL);

          browserslist.clearCaches();
          console.log();
          console.log(
            `${chalk.green('Set target browsers:')} ${chalk.cyan(
              defaultBrowsers.join(', ')
            )}`
          );
          console.log();
        })
        // Swallow any error

.then(filePath => {
          if (filePath == null) {
            return Promise.reject();
          }
          const pkg = JSON.parse(fs.readFileSync(filePath));
          pkg['browserslist'] = defaultBrowsers;
          fs.writeFileSync(filePath, JSON.stringify(pkg, null, 2) + os.EOL);

          browserslist.clearCaches();
          console.log();
          console.log(
            `${chalk.green('Set target browsers:')} ${chalk.cyan(
              defaultBrowsers.join(', ')
            )}`
          );
          console.log();
        })
        // Swallow any error

browsers = browserslist;
      }
    }

    // Parse browser targets
    if (
      typeof browsers === 'object' &&
      browsers != null &&
      !Array.isArray(browsers)
    ) {
      let env = process.env.NODE_ENV || 'development';
      browsers = browsers[env] || browsers.defaults;
    }

    if (browsers) {
      targets.browsers = browserslist(browsers).sort();
    }
  }

  // Dont compile if we couldn't find any targets
  if (Object.keys(targets).length === 0) {
    return null;
  }

  return targets;
}

/**
 * Custom conditionals
 */
const isTargetNode = process.env.BABEL_TARGET === 'node';
// Prefer to target browsers
const isTargetBrowser = !isTargetNode;
// Prefer without runtime
const isBabelRuntime = parseEnv('BUILD_RUNTIME', false);

/**
 * use the strategy declared by browserslist to load browsers configuration.
 * fallback to the default if don't found custom configuration
 * @see https://github.com/browserslist/browserslist/blob/master/node.js#L139
 */
const browsersConfig = browserslist.loadConfig({ path: appDirectory }) || [
	'ie 10',
	'ios 7',
];

const envTargets = isTest
	? { node: 'current' }
	: isWebpack || isRollup || isTargetBrowser || isEs
	? { browsers: browsersConfig }
	: { node: getNodeVersion(pkg) };

const envOptions = { modules: false, loose: true, targets: envTargets };

// The follow jestConfig is a combination of kcd-scripts and create-react-app.
// kcd-script's setup was used as the foundation because of it's simplicity.
// CRA's settings have been added for TypeScript support.
module.exports = () => ({

} else {
      pkg = {};
      pkgDir = this.fs.cwd();
    }

    let pkgTargets = pkg.targets || {};
    let pkgEngines: Engines =
      parseEngines(
        pkg.engines,
        pkgFilePath,
        pkgContents,
        '/engines',
        'Invalid engines in package.json',
      ) || {};
    if (!pkgEngines.browsers) {
      let browserslistBrowsers = browserslist.loadConfig({path: rootDir});
      if (browserslistBrowsers) {
        pkgEngines.browsers = browserslistBrowsers;
      }
    }

    let targets: Map = new Map();
    let node = pkgEngines.node;
    let browsers = pkgEngines.browsers;

    // If there is a separate `browser` target, or an `engines.node` field but no browser targets, then
    // the `main` and `module` targets refer to node, otherwise browser.
    let mainContext =
      pkg.browser || pkgTargets.browser || (node && !browsers)
        ? 'node'
        : 'browser';
    let moduleContext =

function getDefaultBrowsers() {
  // There seems to be a bug with browserslist's data
  for (var name in browserslist.data) {
    if (browserslist.data.hasOwnProperty(name)) {
      browserslist.data[name].released.sort((a, b) => Number(a) - Number(b));
    }
  }

  const config = browserslist.loadConfig({ path: path.resolve(".") });
  return config ? config : defaultBrowsers;
}