使用babel.js 和 polyfill.js 使IE浏览器兼容ES6

本文转载自csdn的asderxiao博主的文章

项目情况

项目开发基本结束，现在要求兼容IE。页面使用HTML+JS编写。其中封装的http请求的js用到箭头函数，导致ie打不开项目。所以此文章只适用于HTML+JS框架。

文件下载：

babel.js:

http://www.5imoban.net/download/js/babel-v6.26.0.min.js

polyfill.js:

npm install --save babel-polyfill

在 node_modules\babel-polyfill\dist\ 文件夹中找到polyfill.js

代码示例：

          -                  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]

注意js的路径

如果可以在Chrome和IE浏览器都可以在开发者模式中看到对应输出则页面可以正常使用

使用说明

js标签变更

HTML里或者引入的js包含了ES6的要使用 type="text/babel"

//js

不包含ES6的可以不加这个type

属性定义

所有的属性都必须定义

引用必须放在定义之后

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" 测试一下。