如何正确构建Create React App项目以兼容IE11？browserslist配置与polyfill使用疑问

Great question! Let's break down each of your concerns step by step to make sure your IE11-compatible Create React App project runs smoothly:

1. Is it okay to simplify browserslist to only "ie 11"? #

Technically, yes—if your project exclusively needs to support IE11 and no other browsers. Browserslist tells tools like Babel and Autoprefixer which browsers to target for transpilation and CSS prefixes. If you only list ie 11, those tools will only generate code that works for IE11.

That said, double-check your user base first. If even a small percentage of users use other older-but-still-active browsers (like Chrome 60+, Firefox 55+), stripping out the other entries could break your app for them. So only use this simplified config if you're 100% sure IE11 is your sole supported browser.

2. Do the other browserslist entries serve a purpose? #

Absolutely! Let's break down what your original entries do:

• >0.2%: Covers browsers used by more than 0.2% of global users—this catches older versions of Chrome, Firefox, Safari, and Edge that are still in use but not the absolute latest.
• not dead: Excludes browsers that are no longer officially supported (like IE10, older Safari versions that Apple stopped updating).
• not op_mini all: Drops Opera Mini, which has very limited support for modern web features.

If your project needs to support anyone beyond IE11 users, these entries ensure your app works for those audiences without extra work on your end. They're a safe way to cover most real-world users while still targeting IE11.

3. Do I need to import react-app-polyfill/ie11? #

Yes, absolutely—this is non-negotiable for IE11 support.

IE11 lacks core ES6+ features that React and many modern JavaScript libraries depend on (think Promise, Array.prototype.includes, Object.assign, and more). The react-app-polyfill/ie11 package is CRA's official solution to fill these gaps.

To use it correctly:

• Add the import as the very first line in your src/index.js file:

  import 'react-app-polyfill/ie11';
  import 'react-app-polyfill/stable'; // Optional but recommended for extra ES feature support
  // Then import React, ReactDOM, your App component, etc.
  

Loading the polyfill first ensures all the missing features are available before React or your app code runs.

Quick Extra Tips #

• Always test your app directly in IE11—even with the right config and polyfills, some CSS features (like flexbox) have quirky behavior in IE11 that you'll need to fix.
• If you're using third-party libraries, make sure they support IE11 too. Some modern libraries might not transpile their code for old browsers, which could break your app even with your own config.

内容的提问来源于stack exchange，提问作者cbdeveloper