javascript - react - ¿Cómo depurar eficientemente las aplicaciones de paquetes web?

node js

Question

Estoy tratando de adoptar el servidor de desarrollo webpack en mi proyecto. Sé que es ampliamente adoptado, por lo que me sorprendió que la depuración de la aplicación parece ser bastante difícil. Dado que el paquete web por defecto produce un solo paquete gigante, los mapas fuente son obligatorios. Tengo un gran problema con ellos:

Dependiendo del modo devtool , los mapas fuente son lentos de analizar ( eval ) o no se usan para mapear algunos rastros de pila ( eval-source-map ), por ejemplo, hay veces que todo el seguimiento de la pila se ve así:
at eval (eval at <anonymous> http://localhost:8082/js/app.js:2004:2), <anonymous>:43:67) .
Además, cuando se llama manualmente a console.trace o console.error, la salida no se mapea. Por lo tanto, debe usar herramientas como sourcemapped-stacktrace ; esto es lento y propenso a errores.

Actualmente utilizo require.js para el desarrollo porque me permite depurar la aplicación muy fácilmente: cada rastro de la pila apunta al archivo y la línea correctos.

¿Cómo logro el mismo resultado con el paquete web?

EDITAR:
Problema relacionado en google chrome: https://code.google.com/p/chromium/issues/detail?id=376409

Problema relacionado en firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=583083

Answer 1

¿Qué devtools usas? Millage puede variar, pero Chrome (e IE / Edge, sí ... IE y Edge) tienden a manejar mejor los mapas de origen. Si bien en este punto todos los principales navegadores los admiten, he tenido la peor experiencia con Firefox.

Tenemos paquetes muy grandes y los mapas fuente no han causado ninguna lentitud en devtools. ¿Qué modo estás usando? Para el paquete web, usar "eval" hará un mapa fuente en línea que correlaciona los archivos, pero no el origen (para que vea el código generado, pero correlación 1: 1 con los archivos originales). Dado que muchos constructos de ES6, Typescript y Coffeescript no se asignan correctamente (p. Ej .: generadores o comprensiones), este suele ser el modo más fácil de usar y también el más rápido. Usando eval también asegúrate de que "solo funciona" en Chrome devtools sin ninguna acción del desarrollador (tus archivos estarán bajo el paquete web: // pseudo-carpeta)

Para el seguimiento de la pila, no sé si es específico del navegador o qué. Utilizamos Mocha para la prueba unitaria, que no parece estar haciendo nada especial para los mapas de origen, y captura los rastros de pila para representarlos en el paquete web del corrector de pruebas correctamente (incluso incluye el prefijo webpack: // junto con el nombre del archivo original) y el número de línea correcto), entonces ¿tal vez la necesidad de esa biblioteca es específica del navegador o desactualizada?

Answer 2

Me ha npm run watch útil agregar una npm run watch que da inicio al paquete web de la siguiente manera:

webpack -w --devtool eval

Esto da como resultado mapas fuente que al menos tienen el nombre correcto del módulo. Sin embargo, es algo confuso ya que la fuente fuente asignada es pre-algún tipo de procesamiento (babel)? Entonces verás en la fuente algo como:

import react from ''react'';

Pero el nombre de la variable real será enviado a algo como _react2 o similar. Me encantaría que la fuente asignada sea la versión procesada con los nombres de las feas variables o que el alcance tenga las definiciones que se ven en la fuente asignada.

La línea real que tengo en mi package.json para la tarea anterior es:

  "scripts": {
    // other lines edited out
    "watch": "node ./node_modules/webpack/bin/webpack.js -w --devtool eval"
  }