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中的模块也很好用。
我正在尝试在 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中的模块也很好用。