如何快速构建一个兼容IE9的react应用

前言

按理说都2020了不应该再去谈react的构建这些东西，但是仍有人向我询问这些东西，所以这里细说一下如何最快速的构建一个兼容IE9的react应用

create-react-ie

create-react-ie是本人自己开源的一个快速构建兼容IE9+的react应用库

    npm init react-ie demo
    npx create-react-ie demo
    yarn create react-ie demo

等待安装完后可直接开始开发，无需额外配置

create-react-app

create-react-app是一个官方支持的创建 React 单页应用程序的方法。它提供了一个零配置的现代构建设置。

使用

npx或yarn create

    npm init react-app demo
    npx create-react-app demo
    yarn create react-app demo

安装兼容IE的依赖

    yarn add react-app-polyfill core-js

为何是react-app-polyfill和core-js

关于react-app-polyfill的解释可以自行参看官方文档。
至于core-js的引用是因为React 16 依赖集合类型 Map 和 Set ，需要为IE < 11这一类的旧浏览器提供一个全局的 polyfill，core-js只是一个选择，你可以使用其他的polyfill。

shim和polyfill？

首先你需要知道的是这两者都是为了兼容而生，而polyfill可以理解为一个shim库。
两者的区别在于，shim的实现方式是产生一个新的api去实现兼容，而polyfill则是使用符合当前浏览器规范的语法去实现旧的api。

配置

index.js

找到 /你的项目名/src/index.js

在首行添加

    //index.js
    import 'core-js/es';
    import 'react-app-polyfill/ie9';
    import 'react-app-polyfill/stable';
    ......

package.json

找到 /你的项目名/package.json

为browserslist添加IE配置

    //package.json
    {
        ......
        "browserslist": {
            "production": [
                ......
                "ie >= 9"
            ],
            "development": [
                ......
                "ie >= 9"
            ]
        }
    }

至此，一个兼容IE9的react应用就告成了，当然create-react-app还有很多实用的功能，自行参考官网即可。