react almost supports ie8

In react, the highest version that supports ie8 is the "react@0.14" version. Any version higher than this is incompatible with ie8; you can use "es5-shim" in the "index.html" file .js" and "es5-sham.js" methods make react compatible with ie8.

The operating environment of this tutorial: Windows 10 system, ECMAScript version 6.0, Dell G3 computer.

react supports ie8

In the official information released by react, the highest version it supports IE8 is react@0.14 version.

If we are higher than this version, there will be some problems, and it is not compatible with our version, so during our use, we must confirm whether the react version we are using is greater than react0.14,

Of course, the official website also provides a compatible method, which is to add the two files es5-shim.js and es5-sham.js to our index.html file,

And we also need to make sure that the jQuery version used is no greater than jQuery2.0, because jQuery2.0 and above are not supported in IE8. If you are using the bootstrap framework, our jQuery version must be at least jQuery 1.9 or above.

react is a JavaScript library launched by Facebook for building user interfaces. React is mainly used to build UI. Many people think of React as the V (view) in MVC. React has high performance and very simple code logic. More and more people have begun to pay attention to and use it.

ReactJS is a set of JavaScript web libraries built by Facebook and mainly used to build high-performance and responsive user interfaces. React solves a common problem faced by other JavaScript frameworks, which is the processing of large data sets. Being able to use a virtual DOM and use the patch installation mechanism to re-render only the dirty parts of the DOM when changes occur, React is able to achieve much faster performance than other frameworks.

Expand knowledge:

Looking for ways to make React compatible with IE8 on the Internet, I also found many projects to make it compatible, and all modifications were successful, but I followed their instructions When I modified the method to modify my framework, I still found that many details were different from theirs. Here is a summary of modifications:

1. According to the official Weibo announcement, the highest version that supports IE8 is react@0.14. If it is higher than this version, it is not compatible with IE8, so you have to make sure you use The react version is no higher than 0.14. According to the official statement, the compatible method only needs to introduce the two files es5-shim.js and es5-sham.js (can be downloaded through Baidu search) in index.html. These two files are a modified es5 syntax. It is polyfill compatible with es3 syntax, but after these two files are actually added to the project, some errors will still be reported.

2. Make sure that the Jquery version used is the 1.x.x version. IE8 does not support the Juqery2.x version. If you use the BootStrap framework, the minimum Jquery version required by this framework is 1.9 or above.

3. For the other two frameworks, I use "react-redux": "^4.4.1", "react-router": "^1.0.3".

4. You need to add the following dependency packages to package.json:

 "console-polyfill": "^0.2.2",
    "es5-shim": "^4.4.1",
    "eventsource-polyfill": "^0.9.6",
    "fetch-ie8": "^1.4.0",
   "babel-polyfill": "^6.7.4",

After adding the above dependency packages, add the above several dependency packages at the entrance of your front-end program. An installation package is introduced into the program:

require('es5-shim');require('es5-shim/es5-sham');require('console-polyfill');require('fetch-ie8 ');require('babel-polyfill');

5. After completing the above steps, ie8 will still report errors, mainly errors related to the Object.defineProperty function. At this time, a key step is needed to add

  "es3ify-loader": "^0.2.0",

to package.json. This is a package that converts es5 and es6 syntax into es3 syntax. This package does not need to be introduced into the program in the code, but when After our APP.js is packaged, we use this loader to package it again. My app.js is packaged with gulp, but es3ify-loader can only be called with the webpack packaging tool

, so You need to install webpack in the project directory, enter the command: npm install -g webpack. At the same time, create webpack.config.js in the directory. The content inside is:

var webpack = require('webpack');
 
module.exports = {
    //页面入口文件配置，这里是用gulp打包出来的app.js
    entry: {
        index : './build/app.js'
    },
    //入口文件输出配置，这里需要设置对app.js打包后得到的文件名称
    output: {
        path: './',
        filename: 'bundle.js'
    },
    module: {
        //加载器配置，这里使用es3ify-loader对app.js进行再次打包；
        loaders: [
             {
                test: /\.js?$/,
                loaders: ['es3ify-loader'],
             },
        ]
    },
};

After completing the above steps, enter the command in the project directory: webpack will automatically start packaging. After packaging, a bundle will be generated in this directory. .js;

6. After completing the above steps, the compatibility modification of the React Redux Ruoter framework under IE8 is completed. This is my complete modification process. After the modification is completed, the program runs smoothly under IE8. Since the entire front-end is written as a single-page application, page switching refresh is still relatively slow under IE8.

【Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of react almost supports ie8. For more information, please follow other related articles on the PHP Chinese website!