前言
按理說都2020了不應(yīng)該再去談react的構(gòu)建這些東西簿透，但是仍有人向我詢問這些東西，所以這里細(xì)說一下如何最快速的構(gòu)建一個(gè)兼容IE9的react應(yīng)用
create-react-ie
create-react-ie是本人自己開源的一個(gè)快速構(gòu)建兼容IE9+的react應(yīng)用庫
npm init react-ie demo
npx create-react-ie demo
yarn create react-ie demo
等待安裝完后可直接開始開發(fā)赁温，無需額外配置
create-react-app
create-react-app是一個(gè)官方支持的創(chuàng)建 React 單頁應(yīng)用程序的方法挑势。它提供了一個(gè)零配置的現(xiàn)代構(gòu)建設(shè)置驼鹅。
使用
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
關(guān)于react-app-polyfill的解釋可以自行參看官方文檔微谓。
至于core-js的引用是因?yàn)镽eact 16 依賴集合類型 Map 和 Set ，需要為IE < 11這一類的舊瀏覽器提供一個(gè)全局的 polyfill输钩，core-js只是一個(gè)選擇，你可以使用其他的polyfill仲智。
shim和polyfill买乃？
首先你需要知道的是這兩者都是為了兼容而生，而polyfill可以理解為一個(gè)shim庫钓辆。
兩者的區(qū)別在于剪验，shim的實(shí)現(xiàn)方式是產(chǎn)生一個(gè)新的api去實(shí)現(xiàn)兼容，而polyfill則是使用符合當(dāng)前瀏覽器規(guī)范的語法去實(shí)現(xiàn)舊的api前联。
配置
index.js
找到 /你的項(xiàng)目名/src/index.js
在首行添加
//index.js
import 'core-js/es';
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/stable';
......
package.json
找到 /你的項(xiàng)目名/package.json
為browserslist添加IE配置
//package.json
{
......
"browserslist": {
"production": [
......
"ie >= 9"
],
"development": [
......
"ie >= 9"
]
}
}
至此功戚，一個(gè)兼容IE9的react應(yīng)用就告成了，當(dāng)然create-react-app還有很多實(shí)用的功能似嗤，自行參考官網(wǎng)即可啸臀。
