Búsqueda de sitios web

javascript - ¿Cómo tener registro en Vue.js sin console.log?

Quiero tener registros en consola mientras estoy desarrollando en Vue.js, pero quiero que estén deshabilitados para producción.

Hay un módulo vuejs-logger que funciona bien dentro de un componente de Vue y se desactivará en el modo de producción. Pero no funcionará (por ejemplo) en mis archivos de servicio o archivos de biblioteca (fuera de la instancia de Vue) ni en Vuex.

¿Alguien tiene alguna otra sugerencia? ¿Integrada en Vue.js o de otra manera?

Mantente seguro, TIA

Editar: Solo para aclarar, la integración de Typescript de vuejs-logger es el verdadero problema. Genera tantos errores de TS que no puedo usarlo. El registro en JS en sí parece funcionar... Todavía estoy interesado en otras soluciones que puedan funcionar sin problemas.

Respuesta #1

Considera crear tu propio envoltorio simple que funcione en todas partes, asumiendo que estás usando Webpack, como el siguiente:

declare const NODE_ENV: any;

export function log(message: String, level?: 'info' | 'warn' | 'error') {

    // WHEN RUNNING WEBPACK WITH `PRODUCTION` build,
    // IT WILL REMOVE THE FOLLOWING CODE.

    if (NODE_ENV !== 'production') {

        if (level === 'error') {
            console.error(message);
        } else if (level === 'warn') {
            console.warn(message);
        } else {
            console.log(message);
        }
    }
}

Siendo una función simple, literalmente puedes importar esto en cualquier parte de tu código, incluyendo archivos de componentes u otros archivos que no sean de componentes. El punto importante aquí es notar el uso de la variable NODE_ENV que será inyectada por Webpack al ejecutarse en modo Producción. Existen configuraciones similares para Rollup y otros empaquetadores. Lee más sobre esto aquí. Cuando Webpack está empaquetando el código en modo producción, ignorará el código dentro de la construcción if (NODE_ENV !== 'production') { /* some code */ }.

Además, si necesitas envolverlo dentro de un plugin para que esté disponible en cada instancia de componente usando el puntero this, entonces:

const MyLogger = {
    install(Vue: Vue, options: any) {

        // Add an instance method
        Vue.prototype.log = log;
    }
};

Vue.install(MyLogger);

Por supuesto, si estás usando TypeScript, entonces debes enseñar TypeScript usando la ampliación de módulos de esta manera:

import Vue from 'vue';

declare module 'vue/types/vue' {
    interface Vue {
        log(message: string, level?: 'info' | 'warn' | 'error'): void;
    }
}

El fragmento anterior debe estar presente dentro de tu carpeta typings como se especifica usando tsconfig.json. La ruta del directorio sería: ROOT/typings/vue/index.d.ts.

En el archivo tsconfig.json, el arreglo typings debería configurarse en:

"typeRoots": [
    "./node_modules/@types",
    "./typings"
],

Respuesta #2

También es posible usar vuejs3-logger en módulos que no son componentes. Estos son los pasos requeridos:

  1. crear un módulo logger.js con contenido
import VueLogger from 'vuejs3-logger'
import { createApp } from 'vue'

const isProduction = process.env.NODE_ENV === 'production';

const vlOptions = {
    isEnabled: true,
    logLevel : isProduction ? 'info' : 'debug',
    stringifyArguments : false,
    showLogLevel : true,
    showMethodName : true,
    separator: '|',
    showConsoleColors: true
};

// create a dummy app that can be used as logger in other js modules
const app = createApp({})
app.use(VueLogger, vlOptions);
const logger = app.config.globalProperties.$log;

export {VueLogger, vlOptions, logger};
  1. usa esto para crear tu aplicación Vue como de costumbre
import {createApp} from 'vue'
import {VueLogger, vlOptions} from './logger.js'
import App from '../components/App.vue'

createApp(App)
  .use(VueLogger, vlOptions)
  .mount('#app');
  1. En tu módulo externo de JavaScript, haz esto:
import {logger} from './logger.js'

logger.debug("Hi there!")

El punto es que cuando cambias el nivel de registro en logger.js, todos tus módulos de JavaScript se adaptarán a este nivel de registro también.

Artículos relacionados