使用babel.js 和 polyfill.js 使IE浏览器兼容ES6
姚麒
项目情况
项目开发基本结束，现在要求兼容IE。页面使用HTML+JS编写。其中封装的http请求的js用到箭头函数，导致ie打不开项目。所以此文章只适用于HTML+JS框架。
准备工作
js文件下载
https://unpkg.com/babel-standalone@6/babel.min.js
复制babel.js
npm install --save babel-polyfill
在 node_modules\babel-polyfill\dist\ 文件夹中找到polyfill.js
也可以在csdn上下载
babel.rar
测试代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>-</title>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/javascript" src="node_modules\babel-polyfill\dist\polyfill.min.js"></script>
<script type="text/babel">
var arrayLike = {
'0': 1,
'1': 2,
'2': 3,
length: 3
};
// Array.from为ES6新添加的方法
var arr2 = Array.from(arrayLike, x => x + x);
console.log(arr2); // [2, 4, 6]
</script>
</head>
<body>
</body>
</html>
注意js的路径
如果可以在Chrome和IE浏览器都可以在开发者模式中看到对应输出则页面可以正常使用
使用说明
js标签变更
HTML里或者引入的js包含了ES6的要使用 type="text/babel"
<script type="text/babel">
//js
</script>
<script src="content/js/httpRequest.js" type="text/babel"></script>
不包含ES6的js可以不动
属性定义
所有的属性都必须定义
引用必须放在定义之后
var mygrid = $.getDataGrid($("#gridList"), {
url: actionUrl + "listPage"/*"GetPageGrid"*/,
colModel: [
{
label: '设备', name: 'equId', width: 120, align: 'center',
formatter: function (cellvalue, options, row) {
return dataEqu[cellvalue] == null ? "" : dataEqu[cellvalue];
}
},
{label: '测点ID', name: 'pointId', width: 80, align: 'center', key: true},
{label: '测点序号', name: 'pointNum', width: 60, align: 'center'},
{label: '测点名称', name: 'pointName', width: 200, align: 'center'},
{label: '测点编码', name: 'codeName', width: 100, align: 'center'},
{label: '备注', name: 'remark', width: 100, align: 'center'},
{label: '倍率', name: 'multiply', width: 100, align: 'center'}
// { label: '显示顺序', name: 'showOrder', width: 100, align: 'center' }
// { label: '状态', name: 'status', width: 100, align: 'center' }
],
pager: "#gridPager",
//multiselect: true,
//sortname: "pointID"
});
$(function () {
vm.getEquipment();
mygrid.dataBind();
})
例子里有个特殊情况，mygrid 不能在其他地方声明，否则表格失效。目前不清楚原因。猜测是重编译js后导致的bug
技巧
- 在引入了babel.js 和 polyfill.js后，Chrome和IE的表达近似。可以在Chrome里先保证功能正常，再去IE浏览器里处理细节。
- 如果部分代码无异常但是不生效可以考虑加 type=“text/babel” 测试一下。
- IE不行
类似资料：