ES6 modules & classes with Webpack: quick setup & usage

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:

• http://www.ecma-international.org/ecma-262/6.0/
• https://github.com/babel/babel-loader
• http://es6-features.org/

Advertisements