ホームページ  >  記事  >  ウェブフロントエンド  >  反応はほぼie8をサポートします

反応はほぼie8をサポートします

WBOY
WBOYオリジナル
2022-05-05 15:06:062437ブラウズ

react では、ie8 をサポートする最新バージョンは「react@0.14」バージョンです。これより高いバージョンは ie8 と互換性がありません。「index.html」ファイルで「es5-shim」を使用できます。 .js」および「es5-sham.js」メソッドにより、React は ie8 と互換性があります。

反応はほぼie8をサポートします

このチュートリアルの動作環境: Windows 10 システム、ECMAScript バージョン 6.0、Dell G3 コンピューター。

react は ie8 をサポートします

react が公開した公式情報では、IE8 をサポートする最も高いバージョンは、react@0.14 バージョン です。

このバージョンより高い場合、いくつかの問題が発生し、私たちのバージョンと互換性がないため、使用する際に、使用している反応バージョンがreact0.14より大きいかどうかを確認する必要があります,

もちろん、公式 Web サイトでは互換性のある方法も提供しています。これは、es5-shim.js と es5-sham.js の 2 つのファイルをindex.html ファイルに追加するというものです

#また、jQuery2.0 以降は IE8 ではサポートされていないため、使用する jQuery のバージョンが jQuery2.0 以下であることを確認する必要もあります。ブートストラップ フレームワークを使用している場合、jQuery のバージョンは少なくとも jQuery 1.9 以降である必要があります。

react は、ユーザー インターフェイスを構築するために Facebook によって開始された JavaScript ライブラリです。 React は主に UI の構築に使用されますが、React を MVC の V (ビュー) と考える人が多いと思います。 React は高いパフォーマンスと非常にシンプルなコードロジックを備えているため、ますます多くの人が注目し、使用し始めています。

ReactJS は Facebook によって構築された JavaScript Web ライブラリのセットであり、主に高性能で応答性の高いユーザー インターフェイスを構築するために使用されます。 React は、他の JavaScript フレームワークが直面する一般的な問題、つまり大規模なデータ セットの処理を解決します。 React は、仮想 DOM を使用し、変更が発生したときにパッチ インストール メカニズムを使用して DOM のダーティな部分のみを再レンダリングできるため、他のフレームワークよりもはるかに高速なパフォーマンスを実現できます。

知識の拡大:

インターネット上で React を IE8 と互換性を持たせる方法を探していると、互換性を持たせるためのプロジェクトも数多く見つかり、すべての修正が成功しました。しかし、私は彼らの指示に従いました。フレームワークを変更するためにメソッドを変更したとき、多くの詳細が彼らのものと異なることがわかりました。修正内容は以下の通りです:

1. Weiboの公式発表によると、IE8をサポートする最新バージョンはreact@0.14ですが、これより高いバージョンではIE8に対応していないため、反応バージョンが 0.14 以下であることを確認する必要があります。公式声明によると、互換性のある方法では、index.html に 2 つのファイル es5-shim.js と es5-sham.js (Baidu 検索を通じてダウンロード可能) を導入するだけで済みます。これら 2 つのファイルは、変更された es5 構文です。 Polyfill は es3 構文と互換性がありますが、これら 2 つのファイルが実際にプロジェクトに追加された後でも、いくつかのエラーが報告されます。

2. 使用されている Jquery バージョンが 1.x.x バージョンであることを確認してください。IE8 は Juqery2.x バージョンをサポートしていません。 BootStrap フレームワークを使用する場合、このフレームワークで必要な Jquery の最小バージョンは 1.9 以降です。

3. 他の 2 つのフレームワークについては、「react-redux」: "^4.4.1"、「react-router」: "^1.0.3" を使用します。

4. 次の依存関係パッケージを 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",

上記の依存関係パッケージを追加した後、フロントエンド プログラムの入り口に上記のいくつかの依存関係パッケージを追加します。インストール パッケージがプログラムに導入されます:

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

5. 上記の手順を完了した後でも、ie8 は依然としてエラー、主に Object.defineProperty 関数に関連するエラーを報告します。このとき、package.json に

  "es3ify-loader": "^0.2.0",

を追加する重要な手順が必要です。これは、es5 および es6 の構文を es3 の構文に変換するパッケージです。このパッケージは、コードですが、APP.js がパッケージ化された後、このローダーを使用して再度パッケージ化します。私の app.js は gulp でパッケージ化されていますが、es3ify-loader は webpack パッケージ化ツール

でのみ呼び出すことができます。したがって、プロジェクト ディレクトリに webpack をインストールする必要があります。コマンド npm install -g webpack を入力します。同時に、ディレクトリに webpack.config.js を作成します。その内容は次のとおりです:

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

上記の手順が完了したら、プロジェクト ディレクトリにコマンドを入力します: webpack は自動的にパッケージ化を開始します。パッケージ化後、 .js;

6. 上記の手順を完了すると、IE8 での React Redux Ruoter フレームワークの互換性変更が完了します。これが私の完全な修正プロセスです。修正が完了すると、プログラムは IE8 でスムーズに動作します。フロントエンド全体が単一ページ アプリケーションとして記述されているため、IE8 ではページ切り替えの更新がまだ比較的遅いです。

【関連する推奨事項:

JavaScript ビデオ チュートリアル Web フロントエンド ]

以上が反応はほぼie8をサポートしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。