How to use the browserslist.loadConfig function in browserslist

/**
 * 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;
}

function updateReadme() {
  console.log(chalk.whiteBright('Checking README'));
  const productionQuery = browserslist
    .loadConfig({
      env: 'production',
      config: BROWSERSLIST_PATH,
    })
    .join(', ');
  const productionURL = `https://browserl.ist/?q=${encodeURIComponent(productionQuery)}`;

  const template = browsers => `
| <img height="24px" width="24px" alt="Firefox" src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png"><br>Firefox | <img height="24px" width="24px" alt="Chrome" src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png"><br>Chrome | <img height="24px" width="24px" alt="Safari" src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png"><br>Safari | <img height="24px" width="24px" alt="Edge" src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png"><br>Edge |
|:---------:|:---------:|:---------:|:---------:|
| ${browsers.firefox}+ | ${browsers.chrome}+ | ${browsers.safari}+ | ${browsers.edge}+ |

However, if you have an issue with a browser [on this list](${productionURL}), please feel free to open a bug report.`;

  const browsers = browserslist(null, {
    env: 'supported',

)
const RUNTIME_HELPERS_WARN =
  'You should add @babel/runtime as dependency to your package. It will allow reusing "babel helpers" from node_modules rather than bundling their copies into your files.'

if (!treeshake && !hasBabelRuntimeDep && !isTest) {
  throw new Error(RUNTIME_HELPERS_WARN)
} else if (treeshake && !isUMD && !hasBabelRuntimeDep) {
  console.warn(RUNTIME_HELPERS_WARN)
}

/**
 * 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
  ? {browsers: browsersConfig}
  : {node: getNodeVersion(pkg)}
const envOptions = {modules: false, loose: true, targets: envTargets}

module.exports = () => ({
  presets: [
    [require.resolve('@babel/preset-env'), envOptions],
    ifAnyDep(
      ['react', 'preact'],

function query (options) {
  const browserslistEnv = options.modern ? 'modern' : 'legacy'
  let browsers = browserslist.loadConfig({ env: browserslistEnv, path: '.' })
  browsers = browsers && browsers.length ? browsers : jetpackDefaultBrowserslist[browserslistEnv]
  return browsers
}

function checkBrowsers(dir, isInteractive, retry = true) {
  const current = browserslist.loadConfig({ path: dir });
  if (current != null) {
    return Promise.resolve(current);
  }

  if (!retry) {
    return Promise.reject(
      new Error(
        chalk.red(
          'As of react-scripts >=2 you must specify targeted browsers.'
        ) +
          os.EOL +
          `Please add a ${chalk.underline(
            'browserslist'
          )} key to your ${chalk.bold('package.json')}.`
      )
    );

function createAtoms(options?: WebpackAtomsOptions): WebpackAtoms {
  let {
    babelConfig = {},
    assetRelativeRoot = '',
    env = process.env.NODE_ENV,
    vendorRegex = VENDOR_MODULE_REGEX,
    disableMiniExtractInDev = true,
    ignoreBrowserslistConfig = false,
    browsers: supportedBrowsers,
  } = options || {}

  if (ignoreBrowserslistConfig || !loadConfig({ path: path.resolve('.') }))
    supportedBrowsers = supportedBrowsers || DEFAULT_BROWSERS

  const makeExternalOnly = (original: RuleFactory<*>) => (
    options = {}
  ): Rule => {
    let rule = original(options)
    rule.include = vendorRegex
    return rule
  }

  const makeInternalOnly = (original: RuleFactory<*>) => (
    options = {}
  ): Rule => {
    let rule = original(options)
    rule.exclude = vendorRegex
    return rule