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

发表于 | 分类于 ， ，

前言

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

create-react-app

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

使用

npx或yarn create

1
2
npx create-react-app demo
yarn create react-app demo

安装兼容IE的依赖

1
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

在首行添加

1
2
3
4
5
//index.js
import 'core-js/es';
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';
......

package.json

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

为browserslist添加IE配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//package.json
{
    ......
    "browserslist": {
        "production": [
            ......
            "ie >= 9"
        ],
        "development": [
            ......
            "ie >= 9"
        ]
    }
}

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

Do the best!