IE10 报错:缺少‘;’、xxx未定义的处理,配置babel文件


  对于第一次遇到这些问题的朋友,可能真的会去看看是不是哪里忘了加入‘;’符号,

但其实这些报错大都是因为IE10-的环境不支持ES6语法,对于部分错误我们可以切换IE11环境来判断是否为ES6语法的问题

 

 

 

遇到这些问题的直接的解决方法是将ES6语法改为ES5

比如:

 

1.关键字

let、const 要改为 var //注意作用域是否正确
 

2.箭头函数

// 转码前

input.map(item=>item+1)

// 转码后 
input.map(function (item){

    return item+1;

});

 

3.xxx 方法/对象未定义(明明该方法或对象是存在的却还是报该错误,这种情况可以考虑重写xxx方法/对象,以map()、Set()为例)

  1 // 重写map方法,解决ie10及以下模式不兼容map对象和Set对象
  2 function isIE() { //ie?
  3 
  4     if (!!window.ActiveXObject || "ActiveXObject" in window)
  5         return true;
  6     else
  7         return false;
  8 }
  9 
 10 
 11 //如果是 ie 则添加 Map 与  Set类
 12 if(isIE()){
 13     //实现Map
 14     function Map(){
 15         this.elements = new Array();
 16         //获取Map元素个数
 17         this.size = function() {
 18             return this.elements.length;
 19         },
 20             //判断Map是否为空
 21             this.isEmpty = function() {
 22                 return (this.elements.length < 1);
 23             },
 24             //删除Map所有元素
 25             this.clear = function() {
 26                 this.elements = new Array();
 27             },
 28             //向Map中增加元素(key, value) 
 29             this.put = function(_key, _value) {
 30                 if (this.containsKey(_key) == true) {
 31                     if(this.containsValue(_value)){
 32                         if(this.remove(_key) == true){
 33                             this.elements.push( {
 34                                 key : _key,
 35                                 value : _value
 36                             });
 37                         }
 38                     }else{
 39                         this.elements.push( {
 40                             key : _key,
 41                             value : _value
 42                         });
 43                     }
 44                 } else {
 45                     this.elements.push( {
 46                         key : _key,
 47                         value : _value
 48                     });
 49                 }
 50             },
 51             //删除指定key的元素,成功返回true,失败返回false
 52             this.remove = function(_key) {
 53                 var bln = false;
 54                 try {
 55                     for (i = 0; i < this.elements.length; i++) {
 56                         if (this.elements[i].key == _key){
 57                             this.elements.splice(i, 1);
 58                             return true;
 59                         }
 60                     }
 61                 }catch(e){
 62                     bln = false;
 63                 }
 64                 return bln;
 65             },
 66 
 67 
 68             //获取指定key的元素值value,失败返回null
 69             this.get = function(_key) {
 70                 try{
 71                     for (i = 0; i < this.elements.length; i++) {
 72                         if (this.elements[i].key == _key) {
 73                             return this.elements[i].value;
 74                         }
 75                     }
 76                 }catch(e) {
 77                     return null;
 78                 }
 79             },
 80 
 81 
 82             //获取指定索引的元素(使用element.key,element.value获取key和value),失败返回null
 83             this.element = function(_index) {
 84                 if (_index < 0 || _index >= this.elements.length){
 85                     return null;
 86                 }
 87                 return this.elements[_index];
 88             },
 89 
 90 
 91             //判断Map中是否含有指定key的元素
 92             this.containsKey = function(_key) {
 93                 var bln = false;
 94                 try {
 95                     for (i = 0; i < this.elements.length; i++) {
 96                         if (this.elements[i].key == _key){
 97                             bln = true;
 98                         }
 99                     }
100                 }catch(e) {
101                     bln = false;
102                 }
103                 return bln;
104             },
105 
106             //判断Map中是否含有指定value的元素
107             this.containsValue = function(_value) {
108                 var bln = false;
109                 try {
110                     for (i = 0; i < this.elements.length; i++) {
111                         if (this.elements[i].value == _value){
112                             bln = true;
113                         }
114                     }
115                 }catch(e) {
116                     bln = false;
117                 }
118                 return bln;
119             };
120             // 重写forEach方法
121             this.forEach = function forEach(callback, context) {
122                 context = context || window;
123 
124                 //IE6-8下自己编写回调函数执行的逻辑
125                 var newAry = new Array();
126                 for (var i = 0; i < this.elements.length; i++) {
127                 if (typeof callback === 'function') {
128                     var val = callback.call(context, this.elements[i].value, this.elements[i].key, this.elements);
129                     newAry.push(this.elements[i].value);
130                     }
131                 }
132                 return newAry;
133             };
134             //获取Map中所有key的数组(array)
135             this.keys = function() {
136                 var arr = new Array();
137                 for (i = 0; i < this.elements.length; i++) {
138                     arr.push(this.elements[i].key);
139                 }
140                 return arr;
141             };
142 
143 
144             //获取Map中所有value的数组(array)
145             this.values = function() {
146                 var arr = new Array();
147                 for (i = 0; i < this.elements.length; i++) {
148                     arr.push(this.elements[i].value);
149                 }
150                 return arr;
151             };
152     };
153 
154     // 实现Set
155     function Set() {
156         var items = {};
157         this.size = 0;
158         // 实现has方法
159         // has(val)方法
160         this.has = function(val) {
161             // 对象都有hasOwnProperty方法,判断是否拥有特定属性
162             return items.hasOwnProperty(val);
163         };
164 
165         // 实现add
166         this.add = function(val) {
167             if (!this.has(val)) {
168                 items[val] = val;
169                 this.size++;    // 累加集合成员数量
170                 return true;
171             }
172             return false;
173         };
174 
175         // delete(val)方法
176         this.delete = function(val) {
177             if (this.has(val)) {
178                 delete items[val];  // 将items对象上的属性删掉
179                 this.size--;
180                 return true;
181             }
182             return false;
183         };
184         // clear方法
185         this.clear = function() {
186             items = {};     // 直接将集合赋一个空对象即可
187             this.size = 0;
188         };
189 
190         // keys()方法
191         this.keys = function() {
192             return Object.keys(items);  // 返回遍历集合的所有键名的数组
193         };
194         // values()方法
195         this.values = function() {
196             return Object.values(items);  // 返回遍历集合的所有键值的数组
197         };
198 
199         // forEach(fn, context)方法
200         this.forEach = function(fn, context) {
201             for (var i = 0; i < this.size; i++) {
202                 var item = Object.keys(items)[i];
203                 fn.call(context, item, item, items);
204             }
205         };
206 
207         // 并集
208         this.union = function (other) {
209             var union = new Set();
210             var values = this.values();
211             for (var i = 0; i < values.length; i++) {
212                 union.add(values[i]);
213             }
214             values = other.values();    // 将values重新赋值为新的集合
215             for (var i = 0; i < values.length; i++) {
216                 union.add(values[i]);
217             }
218 
219             return union;
220         };
221         // 交集
222         this.intersect = function (other) {
223             var intersect = new Set();
224             var values = this.values();
225             for (var i = 0; i < values.length; i++) {
226                 if (other.has(values[i])) {     // 查看是否也存在于other中
227                     intersect.add(values[i]);   // 存在的话就像intersect中添加元素
228                 }
229             }
230             return intersect;
231         };
232 
233         // 差集
234         this.difference = function (other) {
235             var difference = new Set();
236             var values = this.values();
237             for (var i = 0; i < values.length; i++) {
238                 if (!other.has(values[i])) {    // 将不存在于other集合中的添加到新的集合中
239                     difference.add(values[i]);
240                 }
241             }
242             return difference;
243         };
244 
245 
246     }
247 
248 };
View Code

 

4.无法识别ES6的模板字符串的反引符号``,可以尝试转换为ES5的拼接方式:

//修改前
    // template: `<span :class="['m-switch','m-switch-' + type, { active: booleanVal,'is-disabled': disabled,'is-small': small }] "@touchend.prevent="change" @mouseup.prevent="change"></span>`,
 
//修改后
      template: '<span :class="[\'m-switch\', \'m-switch-\' + type, {active: booleanVal, \'is-disabled\': disabled, \'is-small\': small}]" @touchend.prevent="change" @mouseup.prevent="change"></span>',

 

5.配置.babelrc

  直接修改为ES5语法的操作是治标不治本的,要是报错的文件有几十个怎么办?一劳永逸的方法是在项目中配置.babelrc文件

Babel 是广为使用的 ES6 转码器,可以将 ES6 代码转化为 ES5 代码。

具体实现请看 antd的浏览器兼容性处理 案例。

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM