Échafaudage, rafraîchissement à chaud et chargement à chaud

Cette fois, je vais vous apporter un échafaudage, un rafraîchissement à chaud et un chargement à chaud. Quelles sont les précautions à prendre pour l'échafaudage, le rafraîchissement à chaud et le chargement à chaud ? Voici un cas pratique, jetons un coup d'oeil.

Webpack est très puissant et un échafaudage raisonnable peut nous éviter beaucoup de travail fastidieux et dénué de sens. Parmi eux, l'actualisation à chaud et le chargement à chaud améliorent considérablement le rythme de développement par rapport au développement traditionnel.

Découvrez la différence entre l'actualisation à chaud et le chargement à chaud à partir d'un échafaudage

Je crois que la plupart des développeurs de vue partent de vue-cli, et de nombreux débutants courent avec plaisir avec le projet vue , je n'ose pas changer la configuration de vue-cli à volonté (après tout, webpack est effectivement très compliqué, et vue-cli a aussi fait beaucoup de travail pour optimiser l'expérience des débutants).

En revanche, React ne fournit pas un échafaudage relativement robuste (du moins il n'est pas visiblement trouvé par moi, j'espère que vous pourrez m'éclairer). Pour autant que je sache, l'un est le générateur-react-webpack de Yeoman, l'application create-react-app de React et un bon kit de démarrage de réaction (chargement à chaud et intègre beaucoup de code, qui est hautement référencé).
Quand j'apprenais React, j'ai découvert que les deux premiers échafaudages de réaction mentionnés ci-dessus fournissent un rafraîchissement à chaud plutôt qu'un chargement à chaud.

Distinction simple entre le chargement à chaud et l'actualisation à chaud :

Actualisation à chaud : une fois le fichier modifié, la page entière est actualisée sans conserver aucun statut (comme la saisie de contenu) Formulaire de saisie), ce qui équivaut à webpack vous aidant à appuyer sur F5 pour actualiser
Chargement à chaud : une fois le fichier modifié, la zone modifiée est modifiée au coût minimum. Conservez autant que possible l'état avant de modifier le fichier (après avoir saisi le contenu d'entrée, modifiez le code des autres balises)

Bien que les deux améliorent l'expérience de développement par rapport au développement traditionnel (manuel F5), les deux L'écart est encore énorme, d'autant plus que le projet devient plus complexe, il faut résoudre ce problème une fois pour toutes (en laissant plus de temps pour développer les bugs).

Modification pratique

La configuration à partir de zéro est un autre domaine, nous commençons donc à apporter des modifications directement à partir de vue-cli.

Les étapes suivantes répertorient uniquement la clé à titre de référence d'inspiration. Pour plus de détails, veuillez vous référer au projet complet final de github

1. Supprimer les dépendances, les fichiers, etc. ; tout dans l'intégralité de la scr Vous pouvez supprimer la dépendance

2. package.json et ajouter babel-loader webpack-dev-server react-hot-loader (le plus important)

3. paramètre de ligne de commande package.json "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"

4. webpack.base .conf L'ajout de fichiers .jsx doit être traité par babel-loader Options de configuration :{plugins :['react-hot-loader/babel']}

5. Les préréglages .babelrc sont ajoutés pour réagir, ci-dessous Ajouter des plugins :['react-hot-loader/babel']

6. Créez main.js dans le dossier src (le nom doit être cohérent avec le fichier d'entrée configuré par webpack)

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); // 热加载的关键

À ce stade, nous pouvons volontiers utiliser React pour expérimenter le plaisir du chargement à chaud~

Le problème est en fait

Modifiez simplement le fichier main.js dans vue-cli pour réagir au code lié (n'oubliez pas de configurer Babel pour gérer jsx) et toujours actualiser à chaud.

Après avoir observé et comparé le code local, j'ai trouvé un nom attrayant :

Dans le fichier webpack.dev.conf :

new webpack.HotModuleReplacementPlugin()

Je l'ai découvert après une recherche en ligne C'est la clé pour réaliser un chargement à chaud. Cela nécessite que le code lui-même soit modulaire (ce qui signifie que tout framework capable d'écrire des composants réutilisables comme les trois frameworks principaux peut tirer parti de cette propriété), afin que le code puisse être branché et débranché. . Implémentez le chargement à chaud.

Les effets spéciaux jsx de React ne peuvent pas être gérés par HotModuleReplacementPlugin et ne peuvent être actualisés qu'à chaud.

Dans ce cas, React-hot-loader est sur le point de sortir. Conformément à la méthode d'utilisation officielle, vous pouvez continuer à utiliser le rechargement à chaud.

ps : Pour référence seulement, j'explore et apprends encore beaucoup de codes de réaction

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez. faites attention aux autres sujets connexes dans l'article du site Web PHP chinois !

Lecture recommandée :

Code d'état 302 dans axios

Encapsulez le crochet de navigation de routage Vue2 et utilisez-le dans le combat réel

Ce 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!