足場とホットリフレッシュとホットローディング

今回は、スキャフォールディング、ホットリフレッシュ、ホットローディングについてお届けします。スキャフォールディング、ホットリフレッシュ、ホットローディングの注意点は何ですか?実際のケースを見てみましょう。

Webpack は非常に強力であり、適切なスキャフォールディングにより、退屈で無意味な作業を大幅に節約できます。その中でも、ホット リフレッシュとホット ローディングは、従来の開発と比較して開発ペースを大幅に向上させます。

スキャフォールディングからのホットリフレッシュとホットロードの違いを発見してください

ほとんどの Vue 開発者は vue-cli から始めると思いますが、vue-cli の設定を自由に変更することはできません。 webpack は確かに非常に複雑であり、vue-cli も初心者向けのエクスペリエンスを最適化するために多くの作業を行っています)。

対照的に、react は比較的堅牢な足場を提供しません (少なくとも私には明らかに見つかりません。教えていただければ幸いです)。私の知る限り、その 1 つは yeoman のgenerator-react-webpack、reactのcreate-react-app、そして優れたreact-starter-kit (ホットロードで、多くのコードが統合されており、よく参照されています) です。
React を学習していたとき、上記の最初の 2 つの React スキャフォールドがホット ロードではなくホット リフレッシュを提供することを発見しました。

ホットロードとホットリフレッシュの簡単な区別:

ホットリフレッシュ: ファイルが内部的に変更された後、状態(コンテンツが入力された入力フォームなど)を保持せずにページ全体が更新されます。 Webpack が F5 を押すのと同等です。 リフレッシュ
ホットロード: ファイルが変更された後、最小限のコストで変更された領域が変更されます。ファイルを変更する前の状態を保持するようにしてください (入力内容を入力した後、他のタグのコードを修正します)

どちらも従来の開発 (手動 F5) と比較して開発エクスペリエンスが向上していますが、両者の間にはまだ違いがあります非常に大きく、特にプロジェクトがより複雑になるにつれて、この問題をきっぱりと解決する必要があります (バグの開発により多くの時間を残しておきます)。

実践的な変更

ゼロからの設定は別の領域なので、vue-cli から直接変更を加え始めます。

以下の手順は、インスピレーションを参照するために重要な手順のみを示しています。詳細については、最終的な github の完全なプロジェクトを参照してください

1. vue 関連の依存関係、ファイルなどを削除すると、scr 全体を削除できます。 package.json の依存関係 babel-loader webpack-dev-server act-hot-loader を追加します (最も重要)

2. package.json コマンドライン設定 "dev": "webpack-dev-server --inline --progress - -config build/webpack .dev.conf.js"

3. webpack.base.conf .jsx ファイルの追加は babel-loader で処理する必要があり、オプションを設定します: {plugins:['react-hot-loader/babel' ]}

4. 。反応する babelrc プリセットを追加し、以下のプラグインを追加します: ['react-hot-loader/babel']

5. src フォルダーに main.js を作成します (名前はエントリと一致している必要があります) webpack で設定されたファイル)

6. import 'core-js/fn/object/assign';
   import React from 'react';
   import ReactDOM from 'react-dom';
   import { hot } from 'react-hot-loader';
   import App from './pages/App'; // 自己写吧
   import './assets/css/reset.scss';
   // Render the main component into the dom
   ReactDOM.render(<App/>, document.getElementById('app'));
   export default hot(module)(App); // 热加载的关键

   ログイン後にコピー

   この時点で、喜んで React を使用してホットロードの楽しさを体験できます~

実際には、vue-cli で main.js ファイルを変更するだけです。反応関連のコード ( jsx を処理するように babel を設定することを忘れないでください) とホット リフレッシュを行います。 ローカル コードを観察して比較した結果、魅力的な名前を見つけました:

webpack.dev.conf ファイル内:

new webpack.HotModuleReplacementPlugin()

オンラインで検索した後、これがホット ロードを実現するための鍵であることがわかりました。この性質は、3 つの主要なフレームワークが再利用可能なコンポーネントを作成できる限り、この性質を利用できることを意味します。そのため、コードのプラグインとアンプラグによってホット ロードを実現できます。

React の JSX 特殊効果は HotModuleReplacementPlugin では処理できず、ホット リフレッシュのみ可能です。

この場合、react-hot-loader が登場しようとしています。公式の使用方法に従って、ホットリロードを引き続き使用できます。

追記: 参考までに、私も多くの反応コードを調べて学習しています

この記事の事例を読んだ後は、この方法を習得したと思います。さらにエキサイティングな情報については、 の他の関連記事に注目してください。 PHPの中国語サイトです！

推奨読書:

Vue2 ルーティング ナビゲーション フックのカプセル化と実際の戦闘での使用

以上が足場とホットリフレッシュとホットローディングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。