Babel 6.0.20 Modules feature not work in IE8

Question

I am trying to export a es6 module in header.js:

export default {
    setHeaderHighlight: function (index) {
        // do somethings
    }
};
<         


        

Answer 1

By default, Babel 6.x requires you to enable an explicit set of transformations. The standard es2015 preset converts ES6 to ES5, however IE8 is not ES5-compatible. In this case, if you look at the plugins list, you will see

• transform-es3-member-expression-literals
• transform-es3-property-literals

These will convert your properties to be compatible with IE8. Generally in Babel 6.x you'd do this by passing those names as part of your plugins array, alongside the presets array and install the transforms via

npm install --save-dev babel-plugin-transform-es3-member-expression-literals babel-plugin-transform-es3-property-literals

Answer 2

I also have the problem, and I wrote a webpack plugin to resolve it. I didn't really know if there is a nicer way to handle it, but it works.

The module in node_modules also works well.

Answer 3

I use webpack + es3ify-loader as workaround.

loaders: {
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loaders: ['es3ify', `babel?${JSON.stringify(babelQuery)}`],
  },
}