react 在某些低版本安卓手機瀏覽器白屏解決辦法

開始學習react,簡單寫了一個demo,react-redux,createBrowserHistory,本身測試了一下,畢竟用一個新的工具,兼容性問題是很重要的,發如今一些低版本的安卓瀏覽器白屏,查了一下,原來是babel的問題 react

Babel默認只轉換新的JavaScript句法,對於ES6的新API,如erator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise、Async,以及一些定義在全局對象上的方法(好比Object.assign)都不會轉碼 npm

對於react,是引用import React from 'react'裏面的有些方法不兼容,解決方案大體分爲兩種redux

  • 使用core-js,優勢是能夠針對性的引入react自己不支持的屬性,對於其在業務操做中須要的其餘新的api,也須要針對性引入;優勢是,這樣生產包會小不少api

1.下載core-js,便可解決瀏覽器

$ npm install core-js
複製代碼

2.在入口js文件引入babel

import  'core-js/fn/Map';
import  'core-js/fn/set';
or:
import 'core-js/es/Map';
import 'core-js/es/set';
複製代碼
  • 使用babel-polyfill,缺點就是包自己太大;優勢是能夠爲當前環境提供一個墊片,幾乎能夠兼容全部的瀏覽器工具

1.下載babel-polyfill學習

$ npm install --save babel-polyfill
複製代碼

2.在入口js文件最上面引入測試

import 'babel-polyfill'
複製代碼

兩種方法,按照上面步驟再次執行完後運行就能夠了spa

提示:若是隻是純粹的想解決react自己包的兼容問題,提倡使用第一種方法
相關文章
相關標籤/搜索