Babel 6.0.20 模块功能在 IE8 中不起作用

Babel 6.0.20 Modules feature not work in IE8

我正在尝试在 header.js 中导出一个 es6 模块:

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

并将其导入 index.js:

import header from "./header.js"

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

然后在index.bundle.js转换出来:

var _header = __webpack_require__(129);

var _header2 = _interopRequireDefault(_header);

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

问题来了,ie8 会在 { default: obj } 出现 Expected identifier 异常,但一切正常 >=ie9.

有什么我可以用这个做的吗?

默认情况下,Babel 6.x 要求您启用一组显式转换。标准 es2015 预设将 ES6 转换为 ES5,但 IE8 不兼容 ES5。在这种情况下,如果您查看 plugins list,您将看到

这些会将您的属性转换为与 IE8 兼容。通常在 Babel 6.x 中,你会通过将这些名称作为 plugins 数组的一部分与 presets 数组一起传递并通过

安装转换来完成此操作
npm install --save-dev babel-plugin-transform-es3-member-expression-literals babel-plugin-transform-es3-property-literals

我使用 webpack + es3ify-loader 作为解决方法。

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

我也遇到了这个问题,写了a webpack plugin解决了。我真的不知道是否有更好的方法来处理它,但它确实有效。

node_modules中的模块也很好用。