Create a react project using the latest version of create-react-app (v2.1.0)

Obviously, this is a compatibility issue with ES6 with IE9. Two approaches were first tried:

  1. Use the react-app-polyfill provided by create-react-app and add it to the entry file index.js:
import 'react-app-polyfill/ie9'
Copy the code
  1. Use core-js to introduce polyfill according to react documentation:
import 'core-js/es6/map'
import 'core-js/es6/set'
Copy the code

The result of both scenarios is that when packaged with YARN Build, it runs without problems in IE9, but still reports errors in development mode.

At this point, you can conclude that some code executed in development mode has compatibility problems and was executed before index.js.

This compatibility problem was solved by introducing ES6-sham and ES6-shim at the head of the index.html file, ensuring that polyfill scripts were executed before all code was executed.

.<title>React App</title>
        <script src="./es6-sham.js"></script>
        <script src="./es6-shim.js"></script>
    </head>.Copy the code

Speaking of this, some students may ask, what are polyfill, ES6-sham and ES6-Shim respectively?

Dr. Axel Rauschmayer explains it this way:

A shim is a library that brings a new API to an older environment, using only the means of that environment.

A polyfill is a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively. Flattening the API landscape if you will. Thus, a polyfill is a shim for a browser API. You typically check if a browser supports an API and load a polyfill if it doesn’t. That allows you to use the API in either case.

Shim, polyfill, shim, shim, polyfill The only difference is that polyfill is browser-specific, whereas Shim can be used in a variety of environments, such as Node etc. Es6-shim is a script for a runtime environment that doesn’t support ES6 natively.

So what is Sham? Here’s one answer from StackOverflow:

The shams, however contain those features that can not be emulated with other code. They basically provide the API, so your code doesn’t crash but they don’t provide the actual functionality.

Sham, which means “fake”, is mainly used to simulate some apis that cannot be implemented with other code, preventing code crashes; However, they also don’t provide the true functionality of the API, so they are a means of Saliently Failing. For common shams, see ES5-sham and ES6-sham.

(after)