兼容IE8 · TTK-新手指南

## 兼容解決方案 antd組件庫本身兼容到ie9瀏覽器。 ### react 15 對于使用了`axios`這個請求庫的項目，因為他使用了Promise語法，所以需要引入`es6-promise`的兼容包。而對于使用其他es6語法的包或項目，需要使用`babel-polyfill`(包含promise)來進行語法兼容。 - 入口文件處引入先下載安裝 ``` npm install -S babel-polyfill ``` 再在入口文件處引入 ``` import 'babel-ployfill' ``` - 使用script標簽引入 ``` <script src="http://cdn.*.com/polyfill.min.js"></script> ``` - webpack引入,修改wabpack配置文件的入口 ``` module.exports = { entry: ["babel-polyfill", "./app/js"] }; ``` ### react 16 對于老瀏覽器（ie < 11）因為reactv16使用了map和set需要使用引入babel-polyfill或者使用core-js 如果使用core-js,在入口處 ``` import 'core-js/es6/map'; import 'core-js/es6/set'; import React from 'react'; import ReactDOM from 'react-dom'; ``` 如果使用babel-polyfill ``` import 'babel-polyfill'; import React from 'react'; import ReactDOM from 'react-dom'; ``` react也使用了`requestAnimationFrame`,可以使用`raf`包來兼容。 ``` import 'raf/polyfill' ``` ### 兼容 IE8 首先，你不應該使用 React v15 或更高版本。使用仍然支持 IE8 的 React v0.14 即可。如果你需要查看 React v0.14 的文檔，請訪問：http://react-ie8.xcatliu.com #### 使用 CommonJS 強烈推薦使用 CommonJS 風格來引入需要的模塊。首先安裝這些模塊： ```shell npm install --save es5-shim console-polyfill ``` 然后把以下代碼插入到*入口文件最前面*： ```js require('es5-shim'); require('es5-shim/es5-sham'); require('console-polyfill'); ``` 也可以使用我們提供的CDN的polyfill文件,放在所有js上面。里面包含了`es5-shim`、`es5-sham`、`console-polyfill`、`babel-polyfill`文件 ``` <script src="://cdn.*.com/polyfill.js"></script> ``` #### 其他問題一些問題其實并不是 `React` 的問題，不過我也把他們列出來了：錯誤信息 | 原因 | 解決方案 | 相關 Issue | 示例 -------- | ---- | -------- | ---------- | ---- `Expected identifier` | 代碼中或者第三方模塊中使用了保留字，比如 `default` | 使用 [es3ify] 或者 [es3ify-loader] | [#1] | [Fetch IE8] `Exception thrown and not caught` | babel 把 `export * from 'xxx'` 編譯成了 `Object.defineProperty`，而 IE8 中不支持 accessor property | 把 `require('es5-shim')` `require('es5-shim/es5-sham')` 插入到入口文件的最上方，并且在代碼中不要使用 `export * from 'xxx'` | [#2][#2] [#32][#32] | [Hello World] `Object expected` | 可能你使用了 `fetch` | 用 `es6-promise` 和 `fetch-ie8` polyfill | [#4] | [Fetch IE8] `'Promise' is undefined` | `Promise` 需要 polyfill | 用 `es6-promise` polyfill | [#5] | [Fetch IE8] `Object doesn't support this property or method` | 可能你使用了 `Object.assign` | 用 `core-js` polyfill | [#7] | [Object Assign] `'JSON' is undefined` | 需要使用 IE8 Standards Mode | 添加 `<!DOCTYPE html>` 和 `<meta http-equiv="X-UA-Compatible" content="IE=EDGE"/>` | [#8] | [Hello World]