Bruce Bruce - 1 month ago 19
Javascript Question

Babel 6.0.20 Modules feature not work in IE8

I am trying to export a es6 module in

header.js
:

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


And import it in
index.js
:

import header from "./header.js"

$(function () {
header.setHeaderHighlight(0);
});


Then transformation comes out in
index.bundle.js
:

var _header = __webpack_require__(129);

var _header2 = _interopRequireDefault(_header);

function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj }; // crash here
}


So here is the problem, ie8 will rise a
Expected identifier
Exception at
{ default: obj }
, but everythings is ok >=ie9.

Is there something i can do with this?

Answer

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

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