Cómo utilizar correctamente la actualización y la carga en caliente en el paquete web
Descubra la diferencia entre actualización en caliente y carga en caliente desde scaffolding
Creo que la mayoría de los desarrolladores de vue comienzan con vue-cli, y muchos principiantes ejecutan felizmente proyectos de vue. Pero no me atrevo a cambiar el configuración de vue-cli a voluntad (después de todo, webpack es realmente muy complejo y vue-cli ha trabajado mucho para optimizar la experiencia para principiantes).
Por el contrario, reaccionar ya no ofrece un andamiaje más potente (al menos no lo encontré obvio cuando pedí consejo). Hasta donde yo sé, uno es el generador-react-webpack de yeoman, la aplicación create-react-app de React y un bonito kit de inicio de reacción (recarga en caliente y altamente integrado con código altamente referenciado).
En el proceso de aprender a reaccionar, me di cuenta de que los dos primeros andamios de reacción proporcionan actualización en caliente en lugar de carga en caliente.
Diferencia simple entre carga en caliente y actualización en caliente:
Actualización en caliente: después de cambiar el archivo, se actualizará toda la página sin conservar ningún estado (como el formulario de entrada que tiene
Recarga en caliente: después de que el archivo cambie, el área modificada se cambiará con un costo mínimo. Intente conservar el estado antes de cambiar el archivo (ingrese contenido, modifique el código de otras etiquetas)
Aunque estos dos puntos mejoran la experiencia de desarrollo en comparación con el desarrollo tradicional (manual F5), la brecha entre los dos Sigue siendo muy grande, especialmente a medida que el proyecto se vuelve más complejo, queremos resolver el problema de una vez por todas (dejando más tiempo para desarrollar errores).
Comenzando con los cambios
La configuración desde cero es otra área, comencemos con vue-cli.
Los siguientes pasos solo enumeran los pasos clave como referencia. Para obtener más detalles, consulte el proyecto completo de github.
Eliminar dependencias, archivos, etc. relacionados con vue; se puede eliminar
Agregar babel-loader webpack-dev-server reaccionar-hot-loader en las dependencias de package.json (las más críticas)
Configuración de línea de comando de package.json "dev" : "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js"
webpack.base.conf agrega el archivo .jsx que debe ser procesado por babel -loader, opciones de configuración: { complementos: ['react-hot-loader/babel']}
.babelrc agrega reaccionar de forma predeterminada y agrega complementos a continuación: ['react-hot-loader/babel' ]
Crear main.Crea el archivo main.js en la carpeta src (nómbralo con el mismo nombre de archivo que el archivo de entrada de la configuración del paquete web)
importar 'core-js/. fn/object/assign' ;
importar React desde 'react';
importar ReactDOM desde 'react-dom'; reaccionar-hot-loader' ;
importar aplicación desde '.
importar aplicación desde '/pages/App' // Escribe la tuya propia
importar '; ./assets/css/ reset.scss';
//Renderiza el componente principal en el dom
ReactDOM.render(lt;App/gt;, document.getElementById(' app' ));
exportar default hot(module)(App); // La clave para la carga en caliente es que podemos usar reaccionar para experimentar la carga en caliente lo antes posible
El problema
En realidad, simplemente modifique el código principal en vue-cli (no olvide configurar babel para manejar jsx) y siga actualizando en caliente.
Después de observar y comparar el código local, encontré un nombre muy atractivo:
En el archivo webpack.dev.conf:
new webpack.HotModuleReplacementPlugin( ) Después de buscar en línea, descubrí que esta es la clave para lograr la carga en caliente. Requiere que el código en sí tenga características modulares (lo que significa que siempre que los tres marcos principales que puedan escribir componentes reutilizables puedan usar esta función), se habilita en caliente. recargando conectando y desconectando el código.
HotModuleReplacementPlugin no puede manejar el efecto jsx de reaccionar, por lo que es solo una actualización en caliente real.
En este caso aparece reaccionar-hot-loader. Con el uso oficial, puede continuar usando la recarga en caliente.
PD: solo como referencia, también estoy explorando y aprendiendo muchos códigos de reacción
Creo que dominas el método después de leer este artículo. Para obtener más información interesante, paga. ¡Atención a otros temas relacionados en el artículo de Gxl.com!
Lectura recomendada:
Cómo manejar archivos grandes empaquetados por webpack
Cómo operar vue.js dentro de la instalación npm