ES6支持IE8
关键字
原理很简单 把双引号包含住,就不会有关键字错误了
es3ify方法
例如class,default等关键字如果单独声明出来
比较常见的是babel转化import时会出现这句话
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
这里的default在IE8下就会报错
解决方法是在webpack中引入es3ify-loader
使用方法
npm i es3ify-loader --save
//在webpack中
{
test: /\.js$/,
loaders: ['es3ify','babel'] //es3ify必须放在babel前
},
//或者
{
postLoaders: [ //postLoaders表明在loader之后
{ test: /\.js$/, loader: 'es3ify' }
]
}
使用后的编码
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
babel es3插件
- http://babeljs.io/docs/plugins/transform-es3-member-expression-literals/
- http://babeljs.io/docs/plugins/transform-es3-property-literals/
在babel引入这两个plugins即可
Object.defineProperty问题
babel的export default中
export default 42
会转化成
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = 42;
在IE8中
Object.defineProperty没有实现,并且不让别人访问或修改!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
所以在plugins引入babel-plugin-transform-es2015-modules-commonjs
https://www.npmjs.com/package/babel-plugin-transform-es2015-modules-commonjs
就可以转化成
exports.__esModule = true;
exports.default = 42;
而在ES6的class使用中
babel正常转化是
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var Options = function () {
function Options() {
_classCallCheck(this, Options);
}
_createClass(Options, null, [{
key: 'defaultOptions',
value: function defaultOptions() {
return {
...
};
}
}, {
这里也是有Object.defineProperties的
解决方案是在编译时使用loose模式
babel转化有normal模式和loose模式,默认为normal
而这里的class转化,需要写成loose才会支持IE8
{
"plugins": [
...
["transform-es2015-classes", { "loose": true }],
]
}
转化后
Options.setOptions = function setOptions(options) {
...
}
UglifyJsPlugin去掉双引号问题
上面说过了如何对default进行加双引号...
但是UglifyJsPlugin打包后..又会把双引号去掉...汗...
webpack
new UglifyJsPlugin({ //压缩代码
compress: {
warnings: false,
screw_ie8: false
},
mangle: false,
output: { screw_ie8: false },
这个设置本身就有加关键字的双引号,无需上面设置babel,