Code Monkey home page Code Monkey logo

logs-loader's Introduction

logs-loader

Embed meaningful logs into your webpack bundle.

Requirements

  • Node 7.5.0 or newer (not tested on earlier versions)
  • Typescript 2.1.5 or newer (not tested on earlier versions)
  • Babel 6.2.2 or newer (not tested on earlier versions)

Installation

npm i logs-loader --save-dev

or

yarn add logs-loader --dev

Usage

A webpack loader that enhances your logs by adding the file and the object logging.

Note: put it before any linter in your webpack config "module->rules->use" list to prevent max-line-length warnings.

src/index.js

const test = ['test'];
console.info(test.length);

webpack.config.js

const path = require("path");
module.exports = {
  entry: {
    app: path.resolve(__dirname, "src", "index.js")
  },
  output: {
      path: path.resolve(__dirname, "build"),
      filename: "app.js"
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        include: [
          path.resolve(__dirname, 'src'),
        ],
        use: [
          {
            loader: 'babel-loader',
            query: {
              babelrc: false,
              extends: path.resolve(__dirname, '.babelrc'),
              plugins: [
                ...(
                  !production ? [
                      "react-hot-loader/babel",
                    ] : []
                ),
                ...(
                  production ? [
                      "transform-remove-console",
                      // ["transform-replace-object-assign", "simple.assign"],
                    ] : []
                ),
              ],
            },
          },
          {loader: 'ts-loader', options: {transpileOnly: false}},
          {
            loader: 'logs-loader',
            query: {
              patterns: ["console"],
            },
          },
          {loader: 'tslint-loader'},
        ],
      },
      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, 'src'),
        ],
        use: [
          {loader: 'babel-loader'},
          {
            loader: 'logs-loader',
            query: {
              patterns: ["console"],
            },
          },
        ],
      },
    ],
  },
};

build/app.js

const test = ['test'];
console.log("/src/index.js:2:test.length", test.length);

By default it modifies all console commands: console.error, console.log... But it can be customized. To modify all winstons logs the "patterns" would be:

webpack.config.js

query: {
  patterns: ["winston"],
},

src/index.js

const test = ['test'];
winston(test.length);
winston.info(test.length);

build/app.js

const test = ['test'];
winston("/src/index.js:2:test.length", test.length);
winston.info("/src/index.js:3:test.length", test.length);

Or

webpack.config.js

query: {
  patterns: ["winston"],
  customLevels: ["debug1", "debug2"],
},

src/index.js

const test = ['test'];
winston.debug1(test.length);
winston.debug2(test.length);

build/app.js

const test = ['test'];
winston.debug1("/src/index.js:2:test.length", test.length);
winston.debug2("/src/index.js:3:test.length", test.length);

Properties

Props Options Default Description
patterns string or Array[string] ["console"] Sets pattern of logger call.
customLevels string or Array[string] [] Sets additional custom logging levels.

Contribute

  1. Submit an issue
  2. Fork the repository
  3. Create a dedicated branch (never ever work in master)
  4. The first time, run command: yarn into the directory
  5. Fix bugs or implement features

Future

  • Add tests
  • Add examples directory

License

This project is licensed under the terms of the MIT license

logs-loader's People

Contributors

gordienkotolik avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.