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