Documentation Menu

AMD, Bundles, ES6, CommonJS, Browserify, cdnjs

This page is about loading the jsnlog.js JavaScript file onto your pages, including as part of a bundle, an AMD module, a CommonJS module, an ES6 module, or with Browserify.

How jsnlog.js is loaded by default

As part of the installation, you will have included a call to the Configure method in your pages (exceptions). That method inserts a <script> tag that loads the jsnlog.min.js file. You can verify this by doing a View Source of the page.

The url of the jsnlog.min.js file to be used in the <script> tag is specified by the productionLibraryPath attribute of the <jsnlog> / JsnlogConfiguration configuration element.

Loading jsnlog.js from a free CDN

By default, jsnlog.js is served from your own web server. If that web server is in the US and your visitor is in Europe, the distance between the two delays loading of the file.

To solve this, jsnlog.min.js is also hosted on cdnjs, meaning it is duplicated on servers all over the world. This means that a visitor in Europe will load the file from a server close by in Europe, etc. (world wide locations), reducing load times.

All you need to do is change the download link in your configuration:

  1. Get the download link for the jsnlog.min.js file from cdnjs
  2. Plug that into the productionLibraryPath attribute of the <jsnlog> / JsnlogConfiguration configuration element.

For example:

<jsnlog productionLibraryPath="https://cdnjs.cloudflare.com/ajax/libs/jsnlog/2.12.1/jsnlog.min.js">
</jsnlog>
JavascriptLogging.SetJsnlogConfiguration(
  new JsnlogConfiguration {
      productionLibraryPath="https://cdnjs.cloudflare.com/ajax/libs/jsnlog/2.12.1/jsnlog.min.js"
  });

Stop automatic generation of script tag for jsnlog.js

If you want to load the jsnlog.min.js file yourself, for example as part of a bundle or as an AMD module, you don't want the generated <script> tag. You can make it go away by simply not setting the productionLibraryPath attribute in the <jsnlog> / JsnlogConfiguration configuration element.

<jsnlog productionLibraryPath="~/Scripts/jsnlog.min.js">
</jsnlog>
JavascriptLogging.SetJsnlogConfiguration(
  new JsnlogConfiguration {
      productionLibraryPath="~/Scripts/jsnlog.min.js"
  });

Alternatively, you could simply remove the call to the Configure method, but that has a few more implications.

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 as part of a bundle

ASP.NET's bundling feature optimizes loading of your CSS and JavaScripot files in Release mode. It does this by using minified versions of the files and combining them in bundles.

You can add jsnlog.js to any bundle, or put it in its own bundle. The NuGet package installs both jsnlog.js and the minified jsnlog.min.js. That way, the bundling feature can pick the right version depending on whether the site runs in Debug mode or Release mode.

Assuming that you intend to load both jQuery and JSNLog in every page, you could add jsnlog.js to the jquery bundle in your BundleConfig class:

bundles.Add(new ScriptBundle("~/bundles/jquery")
       .Include("~/Scripts/jquery-{version}.js")
       .Include("~/Scripts/jsnlog.js"));

Loading jsnlog.js as an ES6 module

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 a CommonJS module

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

  1. Install jsnlog.js from NPM:
    npm install jsnlog
  2. 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 with Browserify

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.