@ackee/browserslist-config

@ackee/browserslist-config

A default browsers list for our projects in Akcee - list of browsers for prod env.

More readble version for our PMs and our clients can found here.

Usage

yarn add @ackee/browserslist-config -D

Add this to your package.json:

    "browserslist": [
        "extends @ackee/browserslist-config"
    ]

---

Browserslist in create-react-app

Usage

1. Make sure to have installed at least @ackee/react-scripts@1.1.1 version:

   yarn add @ackee/react-scripts@1.1.1 -D
   

2. Add to package.json:

   "browserslist": [
       "extends @ackee/browserslist-config"
   ]
   

3. Import core-js in root of your project for correct polyfilling:

   import 'core-js';
   

Recommendations

1. Since node modules often have the largest impact on the final bundle size, it's crucial to choose those packages carefully:

   To leverage the power of browserslist on your project, it's important to choose packages transpiled to modern (non-ES5 JavaScript) as much as possible.

2. Lint the browser compatibility of your code by adding eslint-plugin-compat

Structure

• CRA has its own babel preset called babel-preset-react-app.
• The preset is then used in Webpack configuration in @ackee/react-scripts.
• babel-preset-react-app uses @babel/preset-env preset that transpiles code based on provided browserslist.

Debugging

@babel/preset-env has available debug option. You can set it in:

• babel-preset-react-app/create.js for your source code.
• babel-preset-react-app/dependencies.js for node modules.

An example output could look like this for browserslist only with Chrome 81:

@babel/preset-env: `DEBUG` option

Using targets:
{
    "chrome": "81"
}

Using modules transform: false

Using plugins:
syntax-nullish-coalescing-operator { "chrome":"81" }
syntax-optional-chaining { "chrome":"81" }
syntax-json-strings { "chrome":"81" }
syntax-optional-catch-binding { "chrome":"81" }
syntax-async-generators { "chrome":"81" }
syntax-object-rest-spread { "chrome":"81" }
syntax-dynamic-import { "chrome":"81" }
syntax-top-level-await { "chrome":"81" }

Using polyfills with `entry` option: