MyArchiBook

ES6 modules & classes with Webpack: quick setup & usage

with one comment

For setting up and using ES6 Modules with webpack perform the following steps:

  1. quicky setup js-sdk library using webpack
  2. Install babel-loader and its dependencies.
    npm install babel-loader babel-core babel-preset-env --save-dev
    Here babel-loader is the main package for invoking Babel transpilation. It requires babel-core for apis. babel-presets has the plugin for module-loading.
  3. Configure webpack.config.js
  4. vi index.js

    //Class definition
    export default class Imax {
      get movies() {
        return ['Logan', 'Beauty and the Beast'];
      }
      bookMovie(name) {
        return `Thank you for booking with Imax. Booking ID is ASDFFG|${name}`;
      }
    }
    
    module.exports = new Imax();
  5. webpack // build library
  6. webpack-dev-server  // host library. (hosted locally here)
  7. Client side:
    $.getScript('//localhost:8080/assets/imax.js').then(() => {
        let selectedMovie = Imax.movie[0];
        console.log('Movie list: ', Imax.bookMovie(selectedMovie));
     });
    
  8. O/P:
    Thank you for booking with Imax. Booking ID is ASDFFG|Logan

References:

Advertisements

Written by thangaveluaishwarya

March 24, 2017 at 11:17 AM

One Response

Subscribe to comments with RSS.

  1. Really Helpful 👍

    Ninja Ajnin

    April 13, 2017 at 4:51 PM


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: