Posts Tagged ‘babel-core’
ES6 modules & classes with Webpack: quick setup & usage
For setting up and using ES6 Modules with webpack perform the following steps:
- quicky setup js-sdk library using webpack
- 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.
- Configure webpack.config.js
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();
- webpack // build library
- webpack-dev-server // host library. (hosted locally here)
- Client side:
$.getScript('//localhost:8080/assets/imax.js').then(() => { let selectedMovie = Imax.movie[0]; console.log('Movie list: ', Imax.bookMovie(selectedMovie)); });
- 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