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

Babel 6.0.20 Modules feature not work in IE8

提问by Bruce

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

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

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

And import it in index.js:

并将其导入index.js：

import header from "./header.js"

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

Then transformation comes out in index.bundle.js:

然后转换出来了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 identifierException at { default: obj }, but everythings is ok >=ie9.

所以问题来了，ie8 会Expected identifier在 处引发异常{ default: obj }，但一切正常>=ie9。

Is there something i can do with this?

有什么我可以做的吗？

回答by loganfsmyth

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

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

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

• 转换-es3-成员-表达式-文字
• 转换-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 pluginsarray, alongside the presetsarray and install the transforms via

这些将转换您的属性以与 IE8 兼容。通常在 Babel 6.x 中，您可以通过将这些名称作为plugins数组的一部分与数组一起传递presets并通过以下方式安装转换来完成此操作

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

回答by sorrycc

I use webpack + es3ify-loaderas workaround.

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

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

回答by brycehq

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

我也有这个问题，我写了一个webpack插件来解决它。我真的不知道是否有更好的方法来处理它，但它有效。

The module in node_modules also works well.

node_modules 中的模块也运行良好。