CODEWITHSUNDEEP
babeljswebpack-2
cyberwombat
cyberwombat

Reputation: 40084

Babel preset env not targeting correct env

I may be confused as to what babel-preset-env actually does. My assumption is that it would transpile my code for my targeted browsers including any necessary polyfills. This doesn't appear to be the case in my code though...

My code:

import "babel-polyfill"
...
var k = Object.values({ x: 's' });

My babel settings:

    "presets": [
    [ "env", {
      "useBuiltIns": true,
      "targets": {
        "browsers": ["last 2 versions", "IE 10"]
      }
    }]
  ]

The transpiled code still contains Object.values and IE 10 dies quietly (it does transpile - I can see the rest of the code changing - just seems to target wrong).

Package.json (some of these imports are not in use):

"core-js": "^2.5.1",
"opentype.js": "^0.7.2",
"svg.draggable.js": "^2.2.1",
"svg.js": "^2.6.3",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.23.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-latest": "^6.24.1",
"babel-register": "^6.24.1",
"clean-webpack-plugin": "^0.1.16",
"compression-webpack-plugin": "^1.0.0",
"copy-webpack-plugin": "^4.0.1",
"imports-loader": "^0.7.1",
"mocha": "^3.5.0",
"webpack": "^3.4.1",
"webpack-dev-server": "^2.8.2",
"webpack-merge": "^4.1.0"

Upvotes: 1

Views: 2453

Answers (1)

loganfsmyth
loganfsmyth

Reputation: 161457

babel-preset-env in its default state only handles converting syntax, not polyfilling standard library functionality.

Sounds like you'll want useBuiltins: true in your config. You'll also need to follow the other instructions there by installing core-js and adding an import for babel-polyfill.

Alternatively you can just load babel-polyfill itself and not rely on babel-preset-env at all.

Upvotes: 1

Related Questions