README
@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"
]
create-react-app
Browserslist inUsage
Make sure to have installed at least
@ackee/react-scripts@1.1.1
version:yarn add @ackee/react-scripts@1.1.1 -D
Add to
package.json
:"browserslist": [ "extends @ackee/browserslist-config" ]
Import
core-js
in root of your project for correct polyfilling:import 'core-js';
Recommendations
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.
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: