**前言：每次在android、rn跟h5中切換的時候，程式碼總是會鬧各種笑話，比如在rn中變數都是包含在“{}”只有一層花括號，但是在vue中“{{}}”會有兩層花括號，樣式的話rn是駝峰fontSize這種，但在h5中是font-size,然後在android中老喜歡把一個字串定義為String a=‘123’,/苦笑，說多了都是淚啊，也做了1年多的rn了，總覺得自己react上手應該問題不大，哈哈，今天偶然看到app中有一個頁面是用react寫的，然後有一個bug，就是在部分手機（ios8、某米4）上，h5程式碼中一直報“Uncaught ReferenceError: Set is not defined ”，無奈只能自己去探索一下了，於是就照著react的官網建立了我的第一個react專案，哈哈～ **

怎麼樣建立react專案我就不在這說了哈，跟著官網走，或者網上一搜一大把，我這裡的demo是直接用的react的腳手架“create-react-app”建立的，然後我開心的把專案跑起來的：

然後跑到我的某米四手機上的時候，一片空白，唉唉～～ 很懵逼，於是adb連線電腦，然後用谷歌瀏覽器除錯了一下，發現報錯了：

好吧，看到這個bug的時候，我是既驚喜又慌亂，驚喜的是“專案中的h5的bug終於是在react工程中重現了”，慌亂的是"我該怎麼解決這bug呢？"，“set is no defined”，很明顯就是提示，set在當前js環境中不存在，set小夥伴可以自己去查一下，是es6中支援的集合物件，因為做web前端不是很久，所以之前也是隱約的知道很多瀏覽器對es6的相容性不是很強，所以在建立工程的時候會匯入“babel”、"babel-polyfill"等依賴，好吧，這兩個東西沒出bug之前我是真沒認真研究過，只知道一股腦的往專案中整合。
其實：
Babel預設只轉換新的JavaScript句法（syntax），而不轉換新的API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全域性物件，以及一些定義在全域性物件上的方法（比如Object.assign）都不會轉碼。
舉例來說，ES6在Array物件上新增了Array.from方法。Babel就不會轉碼這個方法。如果想讓這個方法執行，必須使用babel-polyfill，

好啦，很明顯，我們的某米4上瀏覽器的環境是不支援set的，所以我們首先來安裝一下babel-polyfill依賴：

找到你工程專案，然後執行：

npm install --save babel-polyfill

然後找到react專案的入口檔案index.js，匯入babel-polyfill：

import 'babel-polyfill'
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

 

或者你可以放在webpack的entry入口配置中，比如這樣的：
webpack.config.dev.js

   entry: [
        require.resolve('./polyfills'),
        require.resolve('react-dev-utils/webpackHotDevClient'),
        paths.appIndexJs,
    ],

'use strict';

if (typeof Promise === 'undefined') {
  require('promise/lib/rejection-tracking').enable();
  window.Promise = require('promise/lib/es6-extensions.js');
}

// fetch() polyfill for making API calls.
require('whatwg-fetch');
//新增babel-polyfill
require('babel-polyfill');

// Object.assign() is commonly used with React.
// It will use the native implementation if it's present and isn't buggy.
Object.assign = require('object-assign');

// In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
// We don't polyfill it in the browser--this is user's responsibility.
if (process.env.NODE_ENV === 'test') {
  require('raf').polyfill(global);
}

這樣webpack就會在打包的時候直接執行babel-polyfill了。

好啦，儲存執行就ok啦～～

純屬於個人學習筆記，大牛勿噴～～

有了rn跟js的基礎，覺得上手react還是蠻輕鬆的，容我裝個逼，哈哈～～～ 閃啦！

最後歡迎入群,歡迎交流~~

qq群連結: