nordnet-release-plugin

Nordnet release plugin - webpack plugin for building releases of Javascript applications

Purpose

The purpose of this plugin is to simplify continuous integration with Javascript components in legacy websites. By placing a single <script> tag in legacy web it will automatically load latest version of the Javascript component after successful deployment, without requiring any change in the original script tag.

Installation

Install plugin as dev dependency

npm install nordnet-release-plugin --save-dev

Basic usage

Include plugin in webpack config

var NordnetReleasePlugin = require('nordnet-release-plugin');

plugins.push(new NordnetReleasePlugin({
  publicPath: '/sc/project-name/cache/v1'
}));

See webpack docs for more information on how to use plugins with webpack.

Plugin generates one Javascript file per entry point defined in Webpack config. These js files can be included on the page via <script></script> tag. Once loaded on the page it will dynamically inject <script></script> tag with link to an actual required entry point (according to webpack and nordnet-release-plugin settings).

For example, add <script> tag on html page where you want to run your Javascript application

<script src="init/index.js"></script>

index.js might have the following content (depending on your nordnet-release-plugin and webpack configuration)

document.write('<script charset="UTF-8" src="/sc/project-name/cache/v1/index.js"></script>');

Once index.js is loaded it will inject <script> tag on the page to load application entry point.

Note: If you have multiple entry points, then nordnet-release-plugin will generate the same number of JavaScript files respectively, e.g. init/contacts.js and init/blog.js for following webpack configuration:

var entry = {
  contacts: ['./contacts-page.jsx'],
  blog: ['./blog-page.jsx'],
};

Configuration

You can pass a hash of configuration options to nordnet-release-plugin.

var NordnetReleasePlugin = require('nordnet-release-plugin');

plugins.push(new NordnetReleasePlugin({
  initDir: './dist/init',
  publicPath: '/sc/project-name/cache/v1',
  ignoreChunks: [ 'async' ],
  async: false,
}));

Options

initDir:

Location where generated base.js should be saved. Defaults to './dist/init'

publicPath:

Path that should be used when creating links to entry points (path where your application is deployed, e.g. '/sc/project-name/cache/v1'). Defaults to '/'

ignoreChunks:

Array with chunk names that should be ignored. Defaults to empty array. If your application has multiple entry points and for some reason you want to exclude some of them then pass entry point names (as configured in webpack) to ignoreChunks array.

var entryPoints = {
  index: [ './index.js' ],
  admin: [ './admin.js' ],
};

plugins.push(new NordnetReleasePlugin({
  ignoreChunks: [ 'admin' ],
}));

If you are using require.ensure() to create split points and want to make sure that all of them don't end up in .js for your entry point then consider using set up describe below.

Define a code split point using require.ensure and provide a chunk name, see require.ensure for more details

function admin() {
  require.ensure([], function(require) {
    var admin = require('./admin');
    admin();
  }, 'admin');
}

Set up nordnet-release-plugin to ignore async chunk when generating base.js

plugins.push(new NordnetReleasePlugin({
  ignoreChunks: [ 'admin' ],
}));

async:

true | false When set to true then scripts will be dynamically injected on the page instead of using document.write. Defaults to false.

License

MIT © Nordnet Bank AB