瀏覽器兼容問題

1.我經歷過的項目都是react項目，目前遇到的瀏覽器兼容問題可以分爲兩類：

（1）css的問題；

（2）babel-polyfill的問題；

針對第一中問題，我們一般可以直接查詢，這裏轉一個鏈接，有比較多的css以及其他不同瀏覽器兼容問題的描述和解決方式：點擊打開鏈接；

第二種問題出現的原因是由於 Babel 默認只轉換轉各種 ES2015 語法，而不轉換新的 API，比如 Promise，以及 Object.assign、Array.from 這些新方法，這時我們需要提供一些 ployfill 來模擬出這樣一個提供原生支持功能的瀏覽器環境。

例如：

參考連接：https://segmentfault.com/a/1190000005128101

參考連接：https://segmentfault.com/q/1010000010352814/a-1020000010356288

主要有兩種方式：babel-runtime 和 babel-polyfill。

babel-runtime

babel-runtime 的作用是模擬 ES2015 環境，包含各種分散的 polyfill 模塊，我們可以在自己的模塊裏單獨引入，比如 promise：

import 'babel-runtime/core-js/promise'

它們不會在全局環境添加未實現的方法，只是這樣手動引用每個 polyfill 會非常低效，我們可以藉助 Runtime transform 插件來自動化處理這一切。

首先使用 npm 安裝：

npm install babel-plugin-transform-runtime --save-dev

然後在 webpack 配置文件的 babel-loader 增加選項：

loader: ["babel-loader"],
query: {
  plugins: [
    "transform-runtime"
  ],
  presets: ['es2015', 'stage-0']
}

babel-polyfill

而 babel-polyfill 是針對全局環境的，引入它瀏覽器就好像具備了規範裏定義的完整的特性，一旦引入，就會跑一個 babel-polyfill 實例。用法如下：

1.安裝 babel-polyfill

npm install babel-polyfill --save

2.在入口文件中引用：

import 'babel-polyfill'

這裏一定注意是在入口文件。對於我的react項目，我的入口文件是包含route的index.js文件

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory, IndexRoute, Redirect } from 'react-router';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import 'babel-polyfill';
import CookiesWrap from './utils/CookiesWrap';
import reducer from './reducers';
import App from './routes/App';
import Login from './routes/login';

const store = createStore(reducer);
//權限控制
function verifyIdentity(nextState, replaceState) {
  const userInfo = JSON.parse(CookiesWrap.getCookie('userInfo'));
  const userId = CookiesWrap.getCookie('userId');
  switch (nextState.routes[1].path) {
    case null:
    case undefined:
    case '/login-password':
    case '/download-app':
      break;
    default:
      if (userId && userInfo) {
        // 1234表示不同權限
        if ((userInfo.roleType[0] === 4 || userInfo.roleType[0] === 1) && nextState.routes[1].path !== '/learn-data-chart') {
          replaceState('/learn-data-chart');
        }
      } else {
        replaceState('/');
      }
      break;
  }
}

ReactDOM.render((
  <Provider store={store}>
    <Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory}>
      <Route path="/exam/:examPaperId" components={ExamPaperPage} />
      <Route path="/agreement" components={AgreementPage} />
      <Route path="/device-info" components={DeviceInfo} />
      <Route path="/" component={App} onEnter={verifyIdentity}>
        <IndexRoute component={Login} />
        <Route path="/login-password(/forgot)" component={LoginPassword} />
        <Route>
        {/* 所有新增頁面 route 寫在 404 的上面 */}
        <Route path="/404" component={NotFoundPage} />
        <Redirect from="*" to="/404" />
      </Route>
    </Router>
  </Provider >
),
  document.getElementById('root'));
registerServiceWorker();