MyArchiBook

Posts Tagged ‘third party javascript library

Quickly setup JS SDK library using Webpack

leave a comment »

Technology used:

  • node version :  6.9.4
  • npm version :  3.8.5
  • webpack      :  2.2.1
  • webpack-dev-server : 2.4.1

Steps:

  • mkdir imax //project name
  • cd imax
  • npm init
  • npm install webpack --save-dev
  • npm install webpack-dev-server --save-dev //for development use only
    webpack-dev-server helps serve the webpack bundle.
  • vi index.js
    module.exports = { 
      greetings: 'Welcome to IMAX movie booking', 
      movies: ['Logan', 'Beauty and the Beast', 'Transformers'] 
    }
  • Now on running  npm run build, the following error occurs,
    No configuration file found and no output filename configured via 
    CLI option. A configuration file could be named 'webpack.config.js' 
    in the current directory. Use --help to display the CLI options.

    webpack requires webpack.config.js file.

  • vi webpack.config.js

    module.exports = {
        entry: './index.js',        //app entry point
        output: {
            path: 'dist',           //output directory absolute path
            publicPath: '/assets/', //public URL address of output files
            filename: 'imax.js',    //output-bundle filename
            library: 'Imax'         //helps export output-bundle as library
        }
    }

The configuration is done. Now execute the below commands,

  • npm run build
    It internally invokes webpack, which compiles & bundles the library file.
  • npm start
    It starts the dev server & serves the bundled file at http://localhost:8080/assets/imax.js

Client side JS:

$.getScript('//localhost:8080/assets/imax.js').then(() => {
    console.log(Imax.greetings);
    console.log('Movie list: ', Imax.movies);
 });

You can also directly add the script in html and use the library functions.

Output:

Welcome to IMAX movie booking
Movie list: ['Logan', 'Beauty and the Beast', 'Transformers']


References:

Written by thangaveluaishwarya

March 13, 2017 at 10:02 AM