Babel 6.0.20模块功能在IE8中无法工作

Question

我正在尝试在 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及以上版本中一切正常。

我能做些什么吗？

- Bruce

---

我找到了一个临时解决方案：webpack -p将会完成那两个Babel ES3插件的相同功能。 - Bruce

Answer 1

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

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

这些将使您的属性与 IE8 兼容。通常在 Babel 6.x 中，您可以通过将这些名称作为 plugins 数组的一部分来执行此操作，以及安装变换:

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

- loganfsmyth

---

@Bruce，我已经检查过了，我的步骤理论上是可以正常工作的，但实际上并没有。我已经提交了一个 Bug：https://github.com/babel/babel/issues/2817 - loganfsmyth

上述解决方案对我有效，但请注意，如果您有一个默认模块导入，如 import * from 'jquery'，它仍会扩展为 _jquery2.default，其中使用了“default”保留关键字，从而破坏IE。 - Doug

Phabricator的链接在这里：https://phabricator.babeljs.io/T2817。问题编号与旧的Github编号相同。 - loganfsmyth

谁点赞了这个？这根本没解决我的问题！还是在同一个位置崩溃。 - jennas

如果您有一个特定的案例无法工作，请提交一个 bug。这是正确的答案，如果它不起作用，我们需要错误报告。 - loganfsmyth

Answer 2

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

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

- sorrycc

---

我尝试了那种方法，但是出现了“Parse Error: Line 1: Missing from after import”的错误，但这没有任何意义 :/ - gabrielhpugliese

修复了，顺序很重要 :) - gabrielhpugliese

注意：在Webpack2中，您必须将es3ify加载器命名为es3ify-loader - 将babel命名为babel-loader，花了我半个小时才理解 :) - Shlomi

Answer 3

我也有这个问题，我写了一个webpack插件es3ify-webpack-plugin来解决它。我不知道是否有更好的处理方法，但它可以工作。

node_modules中的模块也很好用。

- brycehq