CODEWITHSUNDEEP
javascriptwebpackcross-browserbabeljs
thatgibbyguy
thatgibbyguy

Reputation: 4103

Is there a simple source for setting up babel/webpack for IE11?

I am looking for help transforming es6 to es5 with babel/webpack and am coming up empty. If there is already an answer for this, please tell me.

package.json:

"dependencies": {
  "@babel/polyfill": "^7.0.0",
  "browserslist": "^4.4.1",
  ...
"devDependencies": {
  "@babel/preset-env": "^7.3.1",
  "eslint": "^5.1.0",
  ...

webpack.config.js:

const path = require('path');

const CleanPlugin = require('clean-webpack-plugin');
const ManifestPlugin = require('webpack-manifest-plugin');

module.exports = {
    entry: {
        App: ['@babel/polyfill', './app.js'],
        Library: ['@babel/polyfill', './codegen/library.js'],
        CalculatorPage: ['@babel/polyfill', './calculator-page.js'],
        CalculatorPageExternal: ['@babel/polyfill', './calculator-page-external.js']
    },
    output: {
        path: path.resolve(__dirname, 'static'),
        filename: 'Calc.[name].[chunkhash].js',
        library: [ 'Calc', '[name]' ]
    }

app.js:

require("@babel/polyfill");
...

.babelrc:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["IE >= 10"]
        }
      }
    ]
  ]
}

So far, this changes nothing about what is generated when webpack runs.

I understand questions around this have been asked before - but it seems every answer is so specific to that person's use case that I am having a hard time finding a single source of "this is how you transform esNext to es5" with babel and webpack."

What am I missing/what needs to be done to make this actually generate es5 compatible code?

Upvotes: 0

Views: 4025

Answers (2)

Saransh Kataria
Saransh Kataria

Reputation: 1497

You need to configure the preset to browsers you need to target as well.

Use the following:

[
        '@babel/preset-env',
        {
          targets: {
            browsers: ["IE 11"],
          },
        useBuiltIns: 'usage'
        }
]

Upvotes: 0

gomes
gomes

Reputation: 731

rules.loaders is the webpack key you're searching for.

Using babel-loader and @babel/preset-env (preset for polyfill-ing / transforming all yearly EcmaScript specs without a need for micromanaging specific specs e.g ES6) you'll be able to achieve this.

Upvotes: 1

Related Questions