Dans React, la version la plus élevée prenant en charge ie8 est la version "react@0.14". Toute version supérieure à celle-ci est incompatible avec ie8, vous pouvez ajouter "es5-shim.js" et "es5-shim.js". Fichier "index.html" Les méthodes de ces deux fichiers "es5-sham.js" rendent React compatible avec ie8.
L'environnement d'exploitation de ce tutoriel : système Windows 10, ECMAScript version 6.0, ordinateur Dell G3.
Dans les informations officielles publiées par React, la version la plus élevée qu'il prend en charge IE8 est la version React@0.14.
Si nous sommes supérieurs à cette version, il y aura quelques problèmes, et elle n'est pas compatible avec notre version, donc lorsque nous l'utilisons, nous devons confirmer si la version de réaction que nous utilisons est supérieure à la version de réaction0.14,
Bien sûr, c'est dans la version officielle. Une méthode compatible est également donnée, qui consiste à ajouter les deux fichiers es5-shim.js et es5-sham.js à notre fichier index.html
Et nous devons également nous en assurer. que la version de jQuery utilisée n'est pas une version supérieure à jQuery2.0, car jQuery2.0 et supérieur ne sont pas pris en charge dans IE8. Si vous utilisez le framework bootstrap, notre version de jQuery doit être au moins jQuery 1.9 ou supérieure.
react est une bibliothèque JavaScript lancée par Facebook pour créer des interfaces utilisateur. React est principalement utilisé pour créer une interface utilisateur. Beaucoup de gens considèrent React comme le V (vue) dans MVC. React a des performances élevées et une logique de code très simple. De plus en plus de gens ont commencé à y prêter attention et à l'utiliser.
ReactJS est un ensemble de bibliothèques Web JavaScript construites par Facebook et principalement utilisées pour créer des interfaces utilisateur performantes et réactives. React résout un problème courant rencontré par d'autres frameworks JavaScript, à savoir le traitement de grands ensembles de données. Pouvant utiliser un DOM virtuel et utiliser le mécanisme d'installation de correctifs pour restituer uniquement les parties sales du DOM lorsque des modifications se produisent, React est capable d'atteindre des performances beaucoup plus rapides que les autres frameworks.
Développer les connaissances :
En cherchant des moyens de rendre React compatible avec IE8 sur Internet, j'ai également trouvé de nombreux projets pour le rendre compatible, et tous ont été modifiés avec succès, mais lorsque j'ai suivi leurs méthodes de modification pour modifier mon framework, j'en ai encore trouvé beaucoup Les détails sont différents des leurs. Voici un résumé des modifications :
1. Selon l'annonce officielle de Weibo, la version la plus élevée prenant en charge IE8 est react@0.14. Si elle est supérieure à cette version, elle n'est pas compatible avec IE8, vous devez donc vous en assurer. la version de React que vous utilisez n'est pas compatible avec IE8 supérieure à 0.14. Selon la déclaration officielle, la méthode compatible n'a besoin que d'introduire les deux fichiers es5-shim.js et es5-sham.js (peuvent être téléchargés via la recherche Baidu) dans index.html. Ces deux fichiers sont une syntaxe es5 modifiée. est polyfill compatible avec la syntaxe es3, mais une fois ces deux fichiers ajoutés au projet, certaines erreurs seront toujours signalées.
2. Assurez-vous que la version de Jquery que vous utilisez est la version 1.x.x. IE8 ne prend pas en charge la version Juqery2.x. Si vous utilisez le framework BootStrap, la version minimale de Jquery requise par ce framework est 1.9 ou supérieure.
3. Pour les deux autres frameworks, j'utilise "react-redux": "^4.4.1", "react-router": "^1.0.3".
4. Vous devez ajouter les packages de dépendances suivants à 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",
Après avoir ajouté les packages de dépendances ci-dessus, introduisez les packages d'installation ci-dessus dans le programme à l'entrée de votre programme front-end :
require( 'es5-shim');require('es5-shim/es5-sham');require('console-polyfill');require('fetch-ie8');require('babel-polyfill'); . Après avoir terminé les étapes ci-dessus, ie8 signalera toujours les erreurs, principalement les erreurs liées à la fonction Object.defineProperty. À l'heure actuelle, une étape clé est nécessaire pour ajouter
"es3ify-loader": "^0.2.0",
à package.json. Il s'agit d'un package qui convertit la syntaxe es5 et es6 en syntaxe es3. Ce package n'a pas besoin d'être introduit dans le programme dans le code, mais quand. notre application. Une fois l'empaquetage js terminé, utilisez ce chargeur pour empaqueter à nouveau. Mon app.js est empaqueté avec gulp, mais es3ify-loader ne peut être appelé qu'avec l'outil d'empaquetage webpack
, vous devez donc installer webpack dans le projet. répertoire et entrez la commande : npm install -g webpack. En même temps, créez webpack.config.js dans le répertoire, le contenu à l'intérieur est :
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'], }, ] }, };
Après avoir terminé les étapes ci-dessus, entrez la commande : webpack dans le répertoire du projet, et l'empaquetage démarrera automatiquement. Après l'empaquetage, bundle. .js sera généré dans ce répertoire ;
6. Après avoir terminé les étapes ci-dessus, la modification de compatibilité du framework React+Redux+Ruoter sous IE8 est terminée. Il s'agit de mon processus de modification complet. Une fois la modification terminée, le programme fonctionne correctement sous IE8. Étant donné que l'ensemble du front-end est écrit comme une application d'une seule page, l'actualisation du changement de page est encore relativement lente sous IE8.
【Recommandations associées :
tutoriel vidéo javascriptCe qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!