一、使瀏覽器兼容ES6基本語法
例如：1.新的變量聲明方式 let/const 2.箭頭函數 3.模板字符串 4.函數默認參數 5.展開運算符等基礎語法
方法
- 在引入其他腳本前先引入browser.min.js。（腳本下載地址：開發版本browser.js；生產版本browser.min.js。）
- script標籤的type的值設爲text/babel。
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="./babel/browser.min.js"></script>
<script type="text/babel">
let id = 123;
alert(`name: ${id}`);
</script>
</body>
</html>
結果
需要解析的js 文件中ES6 的 字符串模板可以正常解析；
頁面數據可以顯示了，但是並不是很完美，會導致其他的小問題出現。
由於技術不到家，不知道該怎麼解決，所以只有好放棄這個兼容性處理的 方法，最後只好去掉了es6 的寫法。
二、使IE瀏覽器兼容ES6（Promise 等語法）
Babel 默認只轉換新的 JavaScript 句法，而不轉換新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局對象，以及一些定義在全局對象上的方法（比如 Object.assign）都不會轉碼。爲了解決這個問題，我們使用一種叫做 Polyfill（代碼填充，也可譯作兼容性補丁） 的技術。
解決方法
非node項目：
在頁面引入browser-polyfill腳本：
<script type="text/javascript" src="./babel/browser-polyfill.min.js"></script>
腳本下載地址：開發版本browser-polyfill.js；生產版本browser-polyfill.min.js。
node項目：
polyfill.js安裝方法：npm install babel-polyfill --save
打開 ./build/webpack.base.conf.js
將以下代碼：
entry: { app: './src/main.js', },改爲：
entry: ['babel-polyfill', './src/main.js'];
補充：
在這次遇到的兼容問題，除了ES6語法兼容外，還遇到一個自定義事件兼容的問題（CustomEvent），其他新銳瀏覽器基本都支持。
解決方法
(function () {
try {
// a : While a window.CustomEvent object exists, it cannot be called as a constructor.
// b : There is no window.CustomEvent object
new window.CustomEvent('T');
} catch (e) {
var CustomEvent = function (event, params) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent('CustomEvent');
evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
return evt;
};
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
}
})();
參考地址：https://developer.mozilla.org/zh-CN/docs/Web/API/CustomEvent/CustomEvent