Babel with babel-preset-env seems to ignore browserslist config

Question

I’m testing Babel with browserslist in an npm script.

Here is my current package.json, in which Babel is doing what I expect:

{
  "name": "npm-scripts-igloo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "devserver": "live-server",
    "watch-sass": "node-sass sass/style.scss css/style.css --output-style expanded --watch",
    "compile-sass": "node-sass sass/style.scss css/style.compiled.css --output-style expanded",
    "prefix-css": "postcss css/style.compiled.css --use autoprefixer -o css/style.prefix.css",
    "compress-css": "node-sass css/style.prefix.css css/style.min.css --output-style compressed",
    "build-css": "npm-run-all compile-sass prefix-css compress-css",
    "babel": "babel app.js --watch -o js/app.compiled.js",
    "start": "npm-run-all -p devserver watch-sass babel"
  },
  "browserslist": [
    "last 5 versions"
  ],
  "babel": {
    "presets": [
      [
        "env",
        {
          "targets": {
            "browsers": [
              "cover 99.5%"
            ]
          }
        }
      ]
    ]
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.6.1",
    "autoprefixer": "^9.4.7",
    "babel-cli": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "live-server": "^1.2.1",
    "node-sass": "^4.11.0",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^6.1.1"
  }
}

I’m not using a .babelrc file or any other configuration of Babel.

I’ve tried to target Edge 16 using the browserslist key:

"browserslist": [
    "Edge 16"
  ]

With this configuration, Babel should NOT convert const to var, but it does, as explained here: Babel doesn’t change const since Edge 16 supports it https://github.com/browserslist/browserslist-example

However, if I target Edge 16 using the babel key:

"babel": {
    "presets": [
      [
        "env",
        {
          "targets": {
            "browsers": [
              "Edge 16"
            ]
          }
        }
      ]
    ]
  }

then Babel correctly doesn’t change const to var since Edge 16 supports it.

I would prefer to use the browserslist key, as it’s the recommended practice https://github.com/browserslist/browserslist

Also, I could then simply share this browserslist option with autoprefixer, which is how it’s supposed to work.

But, the problem is that Babel seems to ignore the browserslist key.

The same is true if I use a .browserslistrc file containing:

Edge 16

There is an asterisked note on this slide: https://slides.com/ai/browserslist#/14 that reports: Only Babel 7 supports config file

So, I tried updating Babel to v7:

npm install @babel/core -D

This produced the following in devDependencies:

"@babel/core": "^7.3.4"

Unfortunately, that didn’t seem to make any difference.

So, my questions are:

1. Why does the browserslist key not appear to be affecting Babel? Is there something wrong with my syntax?

2. Does it matter where in package.json the browserslist key appears? i.e. does key order matter?

Answer 1

A little bit late for the party but I was reading through the docs and found out this:

"By default @babel/preset-env will use browserslist config sources unless either the targets or ignoreBrowserslistConfig options are set."

source: here

So in your case you need to get rid of targets property otherwise it will take precedence and neither .browserlistrc nor browserslist property in package.json will take effect.

Hope it helps!