出現(xiàn)的問題
在項(xiàng)目中使用了 ES6 的語法拷获，比如let盔粹、const,導(dǎo)致在iOS 9.3.3版本的瀏覽器報(bào)錯(cuò)夯接，但是在高版本的瀏覽器顯示正常舌菜。
嘗試解決
在確定了是由 ES6 新特性引起的報(bào)錯(cuò)以后冯勉，我們可以換回ES5的語法澈蚌，當(dāng)然這種不適合我們目前的情景。那有沒有什么辦法能把 ES6 在低版本瀏覽器中轉(zhuǎn)譯成ES5的語法呢灼狰？有宛瞄。
目前有很多團(tuán)隊(duì)針對(duì)ES6的兼容問題，開發(fā)出了多種語法解析轉(zhuǎn)換工具來把 ES6 轉(zhuǎn)換成ES5交胚，比較通用的解決方案有babel份汗、jsx、es6-shim等蝴簇，接下來我們就使用babel來做適配杯活。
Babel
Babel 是一個(gè)轉(zhuǎn)換編譯器，它能將 ES6 轉(zhuǎn)換成可以在瀏覽器中運(yùn)行的代碼熬词。Babel 可以處理 ES6 的所有新語法旁钧，并且內(nèi)置了 React JSX 擴(kuò)展及 Flow 類型注解支持吸重。
我們?cè)?code>HTML頁面中直接引用babel
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
然后在頁面JS代碼部分做如下修改
<script type="text/babel">
完成了上述操作以后，我們?cè)跒g覽器里重新運(yùn)行歪今，這時(shí)候我們會(huì)發(fā)現(xiàn)如果頁面只是使用了 ES6 的語法晤锹，上述轉(zhuǎn)換是沒有問題的，可以正常運(yùn)行彤委，但是如果使用了 ES6 的新增API鞭铆，瀏覽器依然會(huì)報(bào)錯(cuò)。造成報(bào)錯(cuò)的原因就是 Babel默認(rèn)只轉(zhuǎn)換 ES6 的新語法（syntax）焦影，不轉(zhuǎn)換新的API
我們需要使用babel-polyfill實(shí)現(xiàn)對(duì) ES6 新API的支持
babel-polyfill
Babel 默認(rèn)只轉(zhuǎn)碼 ES6 的新語法（syntax）车遂，而不轉(zhuǎn)換新的 API，比如 Set斯辰、Maps舶担、Proxy、Reflect彬呻、Symbol衣陶、Promise 等全局對(duì)象，以及一些定義在全局對(duì)象上的方法（比如 Object.assign闸氮、Array.from）都不會(huì)轉(zhuǎn)碼剪况。
如果想讓這些方法運(yùn)行，必須使用 babel-polyfill蒲跨，為當(dāng)前環(huán)境提供一個(gè)中間層译断。
通過babel-polyfill可以讓我們使用如下新API：
- ArrayBuffer
- Array.from
- Array.of
- Array#copyWithin
- Array#fill
- Array#find
- Array#findIndex
- Function#name
- Map
- Math.acosh
- Math.hypot
- Math.imul
- Number.isNaN
- Number.isInteger
- Object.assign
- Object.getOwnPropertyDescriptors
- Object.is
- Object.entries
- Object.values
- Object.setPrototypeOf
- Promise
- Reflect
- RegExp#flags
- Set
- String#codePointAt
- String#endsWith
- String.fromCodePoint
- String#includes
- String.raw
- String#repeat
- String#startsWith
- String#padStart
- String#padEnd
- Symbol
- WeakMap
- WeakSet
進(jìn)入項(xiàng)目文件夾，使用npm方式安裝polyfill:
npm install --save-dev babel-polyfill
在頁面中引用：
<script type="text/javascript" src="node_modules/babel-polyfill/dist/polyfill.min.js"></script>
再運(yùn)行頁面或悲，就不會(huì)有報(bào)錯(cuò)出現(xiàn)了孙咪，而且頁面中使用新API的地方也完美的運(yùn)行通過。
