How do I get Winston to work with Webpack?

Question

I have an electron application which is using node.js. I would like to use Winston for logging in the application. I've added winston to my package.json file, but when I run the build command for webpack I'm getting some warnings from the colors.js dependency in winston.

'...the request of a dependency is an expression...'

It then references winston and colors.js. Ignoring the warnings doesn't work, as the electron application gets an exception trying to load some files from winston.

I did some digging on SO and the github site and they say that colors.js has some dynamic require statements that webpack is having issues with. I've also seen that other sample projects seem to have winston up and running without any issues in their projects. Does anyone know how to correctly include the winston logging package with webpack in an electron app?

Answer 1

There are two sides to this issue:

1) winston directly or indirectly depends on color.js, so that dependency automatically gets included, once winston is there. In some older versions of it, it included a dynamic require statement, which leads to this:

2) a dependency has a dynamic require statement that Webpack cannot handle; you can either configure webpack so it can ignore this specific case, or also upgrade winston to a newer version, so color.js will be picked in a variant without that dynamic require (see https://github.com/winstonjs/winston/issues/984).

To tell Webpack to get along with the dynamic require, you need to tell Webpack that Winston is an external library.

Here's an example from my webpack.config.js:

 externals: {
    'electron': 'require("electron")',
    'net': 'require("net")',
    'remote': 'require("remote")',
    'shell': 'require("shell")',
    'app': 'require("app")',
    'ipc': 'require("ipc")',
    'fs': 'require("fs")',
    'buffer': 'require("buffer")',
    'winston': 'require("winston")',
    'system': '{}',
    'file': '{}'
},

To make the logger available in an angular 2 app using electron, create a logger.js file and then wrap it with a global logging service TypeScript file (i.e. logging.service.ts). The logger.js file creates the logger variable with the desired Winston configuration settings.

logger.js:

    var winston = require( 'winston' ),
    fs = require( 'fs' ),
    logDir = 'log', // Or read from a configuration
    env = process.env.NODE_ENV || 'development',
    logger;
​


     winston.setLevels( winston.config.npm.levels );
    winston.addColors( winston.config.npm.colors );

    if ( !fs.existsSync( logDir ) ) {
        // Create the directory if it does not exist
        fs.mkdirSync( logDir );
    }
    logger = new( winston.Logger )( {
        transports: [
            new winston.transports.Console( {
                level: 'warn', // Only write logs of warn level or higher
                colorize: true
            } ),
            new winston.transports.File( {
                level: env === 'development' ? 'debug' : 'info',
                filename: logDir + '/logs.log',
                maxsize: 1024 * 1024 * 10 // 10MB
            } )
        ],
        exceptionHandlers: [
            new winston.transports.File( {
                filename: 'log/exceptions.log'
            } )
        ]
    } );
    ​
    module.exports = logger;

logging.service.ts:

export var LoggerService = require('./logger.js');

Now the logging service is available for use throughout the application.

Example:

import {LoggerService} from '<path>';
...    
LoggerService.log('info', 'Login successful for user ' + this.user.email);