renderizado - Excluir el código de depuración de JavaScript durante la minificación
quitar el javascript que bloquea la visualización de contenido wordpress plugin (10)
Agregar lógica a cada lugar en su código donde está iniciando sesión en la consola hace que sea más difícil de depurar y mantener.
Si ya va a agregar un paso de compilación para su código de producción, siempre puede agregar otro archivo en la parte superior que convierta los métodos de su console en noop ''s.
Algo como:
console.log = console.debug = console.info = function(){};
Idealmente, eliminaría cualquier método de console , pero si los mantiene de todos modos pero no los usa, probablemente sea el más fácil de usar.
Estoy buscando diferentes maneras de minificar mi código JavaScript, incluidas las JSMin , Packer y YUI normales. Estoy realmente interesado en el nuevo Google Closure Compiler , ya que se ve excepcionalmente poderoso.
Noté que el empacador de Dean Edwards tiene una función para excluir líneas de código que comienzan con tres puntos y comas. Esto es útil para excluir el código de depuración. Por ejemplo:
;;; console.log("Starting process");
Dedico algo de tiempo a limpiar mi base de código y me gustaría agregar consejos como este para excluir fácilmente el código de depuración. En preparación para esto, me gustaría averiguar si esta es la mejor solución, o si hay otras técnicas.
Debido a que aún no he elegido cómo minimizar, me gustaría limpiar el código de una manera que sea compatible con cualquier minificador con el que termine. Entonces mis preguntas son estas:
¿Utilizar el punto y coma es una técnica estándar, o hay otras formas de hacerlo?
¿Packer es la única solución que proporciona esta función?
¿Pueden las otras soluciones adaptarse para funcionar de esta manera también, o tienen formas alternativas de lograr esto?
Probablemente empezaré a usar Closure Compiler eventualmente. ¿Hay algo que deba hacer ahora que lo prepare?
Aunque es una vieja pregunta. Me encontré con el mismo problema hoy y descubrí que se puede lograr usando CompilerOptions .
Seguí este hilo .
Ejecutamos el compilador, desde Java, en nuestro servidor antes de enviar el código al cliente. Esto funcionó para nosotros en el modo Simple.
private String compressWithClosureCompiler(final String code) {
final Compiler compiler = new Compiler();
final CompilerOptions options = new CompilerOptions();
Logger.getLogger("com.google.javascript.jscomp").setLevel(Level.OFF);
if (compressRemovesLogging) {
options.stripNamePrefixes = ImmutableSet.of("logger");
options.stripNameSuffixes = ImmutableSet.of("debug", "dev", "info", "error",
"warn", "startClock", "stopClock", "dir");
}
CompilationLevel.SIMPLE_OPTIMIZATIONS.setOptionsForCompilationLevel(options);
final JSSourceFile extern = JSSourceFile.fromCode("externs.js", "");
final JSSourceFile input = JSSourceFile.fromCode("input.js", code);
compiler.compile(extern, input, options);
return compiler.toSource();
}
Eliminará todas las llamadas a logger.debug, logger.dev ... etc.etc
Esto es lo que uso con Closure Compiler. Primero, necesita definir una variable DEBUG como esta:
/** @define {boolean} */
var DEBUG = true;
Está utilizando la anotación JS para el cierre, que puede leer en la documentación .
Ahora, cada vez que desee un código de depuración, simplemente envuélvalo en una declaración if, como sigue:
if (DEBUG) {
console.log("Running in DEBUG mode");
}
Al compilar su código para la versión, agregue lo siguiente su comando de compilación: --define=''DEBUG=false'' - cualquier código dentro de la declaración de depuración quedará completamente fuera del archivo compilado.
Estoy con @marcel-korpel. No es perfecto, pero funciona Reemplace las instrucciones de depuración antes de la minificación. La expresión regular funciona en muchos lugares. Cuidado con las líneas no cerradas.
/console/.[^;]*/gm
Funciona en:
;;; console.log("Starting process");
console.log("Starting process");
console.dir("Starting process");;;;;
console.log("Starting "+(1+2)+" processes"); iamok(''good'');
console.log(''Message '' +
''with new line''
);
console.group("a");
console.groupEnd();
swtich(input){
case 1 : alert(''ok''); break;
default: console.warn("Fatal error"); break;
}
No funciona:
console.log("instruction without semicolon")
console.log("semicolon in ; string");
Hasta ahora no he investigado la minificación, pero este comportamiento podría lograrse usando una expresión regular simple:
s/;;;.*//g
Esto reemplaza todo en una línea después (e incluyendo) tres puntos y comas sin nada, por lo que se descarta antes de minificar. Puede ejecutar sed (o una herramienta similar) antes de ejecutar su herramienta de minificación, como esta:
sed ''s/;;;.*//g'' < infile.js > outfile.js
Por cierto, si se pregunta si la versión empaquetada o la versión minificada será "mejor", lea esta comparación de los métodos de compresión de JavaScript .
He usado siguiente stuf hecho a sí mismo:
// Uncomment to enable debug messages
// var debug = true;
function ShowDebugMessage(message) {
if (debug) {
alert(message);
}
}
Por lo tanto, cuando haya declarado debug variable que se establece en true , todas las llamadas a ShowDebugMessage() también llamarán a alert() . Así que solo úsela en un código y olvídese de condiciones in situ como ifdef o comentario manual de las líneas de salida de depuración.
Si está utilizando UglifyJS2 , puede usar el argumento drop_console para eliminar las funciones de console. *.
Si usa el compilador de cierre en modo avanzado, puede hacer algo como:
if (DEBUG) console.log = function() {}
Luego, el compilador eliminará todas sus llamadas a console.log. Por supuesto, necesita - --define la variable --define en la línea de comando.
Sin embargo, esto es solo para el modo Avanzado . Si está utilizando el modo Simple, necesitará ejecutar un preprocesador en su archivo fuente.
¿Por qué no considerar Dojo Toolkit? Tiene incorporados pragmas basados en comentarios para incluir / excluir secciones de código basadas en una compilación. Además, es compatible con el compilador de cierre en modo avanzado (ver enlace a continuación).
Una buena solución en este caso podría ser js-build-tools que admite ''compilación condicional''.
En resumen, puede usar comentarios como
// #ifdef debug
var trace = debug.getTracer("easyXDM.Rpc");
trace("constructor");
// #endif
donde defines un pragma como debug .
Luego, al construirlo (tiene una tarea ant)
//this file will not have the debug code
<preprocess infile="work/easyXDM.combined.js" outfile="work/easyXDM.js"/>
//this file will
<preprocess infile="work/easyXDM.combined.js" outfile="work/easyXDM.debug.js" defines="debug"/>
esta es la respuesta (definitiva) para el compilador de cierre:
/** @const */
var LOG = false;
...
LOG && log(''hello world !''); // compiler will remove this line
...
¡esto incluso funcionará con SIMPLE_OPTIMIZATIONS y no --define= es necesario!