web-dev-qa-db-ja.com

IE8でBabel 6.0.20モジュール機能が機能しない

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はExpected identifierで{ default: obj }例外を発生させますが、すべて正常です> = ie9。

これで何かできることはありますか？

javascriptinternet-explorer-8babeljs
24
Bruce

デフォルトでは、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
30
loganfsmyth

回避策として、webpack + es3ify-loader を使用します。

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

私も問題があり、それを解決するために webpackプラグイン と書きました。それを処理するためのより良い方法があるかどうか私は本当に知りませんでしたが、それはうまくいきます。

Node_modulesのモジュールもうまく機能します。

2
brycehq