React unterstützt fast IE8

In React ist die höchste Version, die ie8 unterstützt, die Version „react@0.14“, die mit ie8 nicht kompatibel ist Datei „index.html“ Die Methoden dieser beiden Dateien „es5-sham.js“ machen React mit ie8 kompatibel.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, ECMAScript Version 6.0, Dell G3-Computer.

React unterstützt fast IE8

In den offiziellen Informationen von React heißt es: Die höchste Version, die IE8 unterstützt, ist React@0.14-Version.

Wenn wir höher als diese Version sind, treten einige Probleme auf und sie ist nicht mit unserer Version kompatibel. Wenn wir sie verwenden, müssen wir bestätigen, ob die von uns verwendete React-Version größer als die React0.14-Version ist.

Natürlich ist in der offiziellen Version auch eine kompatible Methode angegeben, nämlich das Hinzufügen der beiden Dateien es5-shim.js und es5-sham.js zu unserer index.html-Datei

Und wir müssen auch sicherstellen dass die verwendete jQuery-Version keine höhere Version als jQuery2.0 ist, da jQuery2.0 und höher in IE8 nicht unterstützt werden. Wenn Sie das Bootstrap-Framework verwenden, muss unsere jQuery-Version mindestens jQuery 1.9 oder höher sein.

react ist eine von Facebook gestartete JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen. React wird hauptsächlich zum Erstellen einer Benutzeroberfläche verwendet. Viele Leute denken, dass React das V (Ansicht) in MVC ist. React hat eine hohe Leistung und eine sehr einfache Codelogik. Immer mehr Menschen achten darauf und nutzen es.

ReactJS ist eine Reihe von JavaScript-Webbibliotheken, die von Facebook erstellt wurden und hauptsächlich zum Erstellen leistungsstarker und reaktionsfähiger Benutzeroberflächen verwendet werden. React löst ein häufiges Problem anderer JavaScript-Frameworks, nämlich die Verarbeitung großer Datenmengen. Durch die Möglichkeit, ein virtuelles DOM zu verwenden und den Patch-Installationsmechanismus zu verwenden, um bei Änderungen nur die fehlerhaften Teile des DOM neu zu rendern, kann React eine weitaus schnellere Leistung als andere Frameworks erzielen.

Wissen erweitern:

Auf der Suche nach Möglichkeiten, React mit IE8 kompatibel zu machen, habe ich auch viele Projekte gefunden, die es kompatibel machen, und alle wurden erfolgreich geändert, als ich ihre Modifikationsmethoden befolgte In meinem Framework habe ich immer noch viele Dinge gefunden, die sich von denen unterscheiden. Hier ist eine Zusammenfassung der Änderungen:

1. Laut der offiziellen Weibo-Ankündigung ist die höchste Version, die IE8 unterstützt, React@0.14. Wenn sie höher als diese Version ist, ist sie nicht mit IE8 kompatibel, Sie müssen also sicherstellen, dass Die von Ihnen verwendete React-Version ist nicht mit IE8 höher als 0.14 kompatibel. Laut offizieller Aussage müssen mit der kompatiblen Methode nur die beiden Dateien es5-shim.js und es5-sham.js (kann über die Baidu-Suche heruntergeladen werden) in die Datei index.html eingefügt werden ist Polyfill-kompatibel mit der ES3-Syntax, aber nachdem diese beiden Dateien tatsächlich zum Projekt hinzugefügt wurden, werden immer noch einige Fehler gemeldet.

2. Stellen Sie sicher, dass die von Ihnen verwendete Jquery-Version Version 1.x.x ist und die Juqery2.x-Version nicht unterstützt. Wenn Sie das BootStrap-Framework verwenden, ist die für dieses Framework erforderliche JQuery-Mindestversion 1.9 oder höher.

3. Für die anderen beiden Frameworks verwende ich „react-redux“: „^4.4.1“, „react-router“: „^1.0.3“.

4. Sie müssen die folgenden Abhängigkeitspakete zu package.json hinzufügen:

 "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",

Nachdem Sie die oben genannten Abhängigkeitspakete hinzugefügt haben, führen Sie die oben genannten mehreren Installationspakete am Eingang Ihres Front-End-Programms in das Programm ein:

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

5 Nach Abschluss der oben genannten Schritte meldet ie8 weiterhin Fehler, hauptsächlich Fehler im Zusammenhang mit der Funktion Object.defineProperty. Zu diesem Zeitpunkt ist ein wichtiger Schritt erforderlich, um

  "es3ify-loader": "^0.2.0",

zu package.json hinzuzufügen. Dies ist ein Paket, das die Syntax von es5 und es6 in die Syntax von es3 konvertiert. Dieses Paket muss nicht im Code eingeführt werden Nachdem die js-Paketierung abgeschlossen ist, verwenden Sie diesen Loader zum erneuten Packen. Meine app.js wird mit gulp gepackt, der es3ify-Loader kann jedoch nur mit dem Webpack-Paketierungstool aufgerufen werden. Daher müssen Sie Webpack im Projekt installieren Verzeichnis und geben Sie den Befehl ein: npm install -g webpack. Erstellen Sie gleichzeitig webpack.config.js im Verzeichnis. Der darin enthaltene Inhalt lautet:

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'],
             },
        ]
    },
};

Geben Sie nach Abschluss der obigen Schritte den Befehl webpack in das Projektverzeichnis ein. Nach dem Packen wird das Paket automatisch gestartet .js wird in diesem Verzeichnis generiert.

6 Nach Abschluss der oben genannten Schritte ist die Kompatibilitätsänderung des React+Redux+Ruoter-Frameworks unter IE8 abgeschlossen. Dies ist mein vollständiger Änderungsprozess. Nachdem die Änderung abgeschlossen ist, läuft das Programm unter IE8 reibungslos. Da das gesamte Frontend als Einzelseitenanwendung geschrieben ist, ist die Aktualisierung des Seitenwechsels unter IE8 immer noch relativ langsam.

【Verwandte Empfehlungen:

Javascript-Video-Tutorial

, Web-Frontend】

Das obige ist der detaillierte Inhalt vonReact unterstützt fast IE8. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!