How To

Loading jsnlog.js

This page shows how to load jsnlog.js onto your pages, using these methods:

From a CDN
CommonJS module
ES6 module
AMD module
Browserify
SystemJS

There are working Node.js demos on Github that show how to use JSNLog for both server side and client side logging.

Loading jsnlog.js from a CDN

Jsnlog.min.js is hosted on cdnjs (world wide locations).

To load jsnlog.js from this CDN, use this script tag:

<script crossorigin="anonymous" src="https://cdnjs.cloudflare.com/ajax/libs/jsnlog/2.30.0/jsnlog.min.js"></script>

Loading jsnlog.js as a CommonJS module

jsnlog.js is available from NPM and has the necessary code to function as an CommonJS module:

Install jsnlog.js from NPM:
```
npm install jsnlog
```
Load jsnlog into your code:
```
var JL = require('jsnlog').JL;
```

CommonJS is normally used on the server, because it doesn't support asynchronous loading by the client over the network. However, Browserify enables you to use this on the client.

Loading jsnlog.js as an ES6 module

Demo importing and using jsnlog in an ES6 application

You can import jsnlog.js into your ES6 code using an ES6 import statement:

import {JL} from 'jsnlog';

You can then use JSNLog normally in your JavaScript code:

JL().info("log entry from ES6 code");

You probably transpile your ES6 code to ES5 with something like Babel. This will convert the ES6 import to a CommonJS require, so effectively you will be loading jsnlog.js as a CommonJS module.

jsnlog.js is available from NPM and has the necessary code to function as an CommonJS module.

CommonJS is normally used on the server, because it doesn't support asynchronous loading by the client over the network. However, Browserify enables you to use this on the client.

Loading jsnlog.js as an AMD module

jsnlog.js has the necessary code to function as an AMD module.

Creating a dependency on JSNLog is no different than doing so on any other module. For example, here is a file with dependencies on jQuery and JSNLog:

require(["jquery", "jsnlog"], function ($, JL) {
    $(function () {
        JL().info('DOM loaded');
    })
});

One problem with this page is that it loads jsnlog.js, which is not minified. If you'd rather load the minified version jsnlog.min.js, you could specify a dependency on that instead:

require(["jquery", "jsnlog.min"], function ($, JL) {
    $(function () {
        JL().info('DOM loaded');
    })
});

Alternatively, if you use require.config in your main module, you can add a line to associate the jsnlog module ID with the minified file:

require.config({
    baseUrl: 'Scripts',
    paths: {
        jquery: 'jquery-1.11.0.min',
        jsnlog: 'jsnlog.min'
    }
});
require(["jquery", "jsnlog"], function ($, JL) {
    $(function () {
        JL().info('DOM loaded');
    })
});

Loading jsnlog.js using Browserify

Working demo that uses Browserify with Node.js
(you can also combine Browserify with .Net and any other server side technology)

Browserify is a Node.js program that allows you to use CommonJS in your client side JavaScript code.

jsnlog.js fully supports CommonJS, and works well with Browserify.

Loading jsnlog.js using SystemJS

Here is an example of configuring SystemJS to load jsnlog.js:

System.config({
    map: {
        "jsnlog": "node_modules/jsnlog/jsnlog.js",
    },
    meta: {
        "node_modules/jsnlog/jsnlog.js": {
            "format": "cjs"
        },
    }
});

This would allow you to load the JL object into your application:

/// <reference path="../node_modules/jsnlog/Definitions/jl.d.ts" />

import { JL } from "jsnlog";