javascript - polyfill - La característica de los módulos de Babel 6.0.20 no funciona en IE8

babel preset polyfill

Question

Estoy tratando de exportar un módulo es6 en header.js :

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

E importarlo en index.js :

import header from "./header.js"

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

Entonces la transformación sale en index.bundle.js :

var _header = __webpack_require__(129);

var _header2 = _interopRequireDefault(_header);

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

Así que aquí está el problema, ie8 aumentará una excepción del Expected identifier en { default: obj } , pero todo está bien> = ie9.

¿Hay algo que pueda hacer con esto?

Answer 1

Por defecto, Babel 6.x requiere que habilites un conjunto explícito de transformaciones. El preajuste estándar es2015 convierte ES6 a ES5, sin embargo, IE8 no es compatible con ES5. En este caso, si nos fijamos en la lista de complementos , verá

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

Estos convertirán sus propiedades para que sean compatibles con IE8. Generalmente en Babel 6.x lo haría pasando esos nombres como parte de la matriz de sus plugins , junto con la matriz de presets e instalaría las transformaciones a través de

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

Answer 2

También tengo el problema, y ​​escribí un plugin webpack para resolverlo. Realmente no sabía si hay una forma mejor de manejarlo, pero funciona.

El módulo en node_modules también funciona bien.

Answer 3

Utilizo webpack + es3ify-loader como solución alternativa.

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