初识React项目遇到的坑（Uncaught ReferenceError: Set is not defined ）

**前言：每次在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(, 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群链接: