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

Question

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

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将会出现Expected identifier异常{ default: obj },但是每一件事都可以> = ie9.

有什么我可以做的吗？

Answer 1

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

• 变换ES3构件表达-文字
• 变换-ES3属性,文字

这些将转换您的属性以与IE8兼容.通常在Babel 6.x中,您可以通过将这些名称作为plugins数组的一部分传递给数组,presets并通过以下方式安装转换:

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

Answer 2

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

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