Which babel-* package should I include in webpack to support IE11

Question

I want to support IE11 (e.g. NodeList.forEach ) in my project using babel inside webpack, but I find it confusing to select the right babel package.

Current packages are:

"@babel/core": "^7.6.4",
"@babel/preset-env": "^7.6.3",
"babel-loader": "^8.0.6",
"webpack": "^4.41.1",
"webpack-cli": "^3.3.9"

Possible candiates are:

• The packages core-js/stable and regenerator-runtime/runtime (as proposed in @babel/polyfill page)

• @babel/plugin-transform-runtime

• @babel/plugin-transform-regenerator

• @babel/runtime

my current webpack.config

             options: {
                compact: false, 
                presets:
                  [["@babel/env", {//env preset
                    "targets": {
                      "browsers": ["last 2 Chrome versions", "last 2 Firefox versions", "Explorer >= 11"]
                    }
                  }]]
              }

Can someone explain what each of these package does and what package/configuration should I include in order for IE11 to be able to support NodeList.forEach.

Answer 1

core-js (installed by @babel/polyfill) implements NodeList.prototype.forEach() as polyfill. See this issue.

So if you import core-js/stable as suggested in the Babel documentation, NodeList.prototype.forEach() will be implemented if it doesn't already exist.

import "core-js/stable";