@ackee/browserslist-config - npm Package Compare versions

Comparing version 1.0.1 to 2.0.0

index.js

		module.exports = {
		development: [
		"last 1 Chrome version",
		"last 1 Firefox version",
		"last 1 Safari version",
		],
		production: [
		"Chrome >= 70",
		"Edge >= 79",
		"Firefox >= 75",
		"Safari >= 12.1",
		"Opera >= 68",
		"iOS >= 12",
		"Android >= 81",
		"OperaMobile >= 55",
		"ChromeAndroid >= 81",
		"FirefoxAndroid >= 68",
		"UCAndroid >= 12",
		"Samsung >= 10",
		"QQAndroid >= 10",
		],
		development: [
		'last 1 chrome version',
		'last 1 firefox version',
		'last 1 safari version',
		],
		production: [
		'>0.2%',
		'not dead',
		'not ie <= 11',
		'not op_mini all',
		'not safari <= 8',
		],
		};

package.json

		{
		"name": "@ackee/browserslist-config",
		"version": "1.0.1",
		"version": "2.0.0",
		"description": "Default browsers list supported in our projects at Ackee",
		@@ -5,0 +5,0 @@ "main": "index.js",

README.md

		# @ackee/browserslist-config

		A default browsers list for our projects in Akcee.
		A default browsers list for our projects in Akcee - [list of browsers for prod env](https://browserslist.dev/?q=PjAuMiUsIG5vdCBkZWFkLCBub3QgaWUgPD0gMTEsIG5vdCBvcF9taW5pIGFsbCwgbm90IHNhZmFyaSA8PSA4).

		More readble version for our PMs and our clients can found [here](https://docs.google.com/document/d/1_SzDspoB9c1RUIVnbx880qxsEfQ5VNKbE33atqXb7Es/edit?usp=sharing).

		## Usage
		@@ -18,1 +20,72 @@
		```

		---

		# Browserslist in [create-react-app](https://github.com/AckeeCZ/create-react-app)

		## Usage

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

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

		2. Add to `package.json`:

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

		3. Import `core-js` in root of your project for correct polyfilling:
		```sh
		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`](https://github.com/amilajack/eslint-plugin-compat)

		## Structure

		- CRA has its own babel preset called [`babel-preset-react-app`](https://github.com/AckeeCZ/create-react-app/tree/master/packages/babel-preset-react-app).
		- The preset is then used in Webpack configuration in [`@ackee/react-scripts`](https://github.com/AckeeCZ/create-react-app/blob/master/packages/react-scripts/config/webpack.config.js).
		- `babel-preset-react-app` uses [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env) preset that transpiles code based on provided browserslist.

		## Debugging

		`@babel/preset-env` has available [`debug`](https://babeljs.io/docs/en/babel-preset-env#debug) option. You can set it in:

		- [`babel-preset-react-app/create.js`](https://github.com/AckeeCZ/create-react-app/blob/master/packages/babel-preset-react-app/create.js#L81) for your source code.
		- [`babel-preset-react-app/dependencies.js`](https://github.com/AckeeCZ/create-react-app/blob/master/packages/babel-preset-react-app/dependencies.js#L86) for node modules.

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

		```sh
		@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:
		```

@ackee/browserslist-config - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics

Worsened metrics