How to use ECMAScript6 modules within webpages

Question

I\'m pretty excited about using ECMAScript 6 features now via Babeljs - in particular, I\'d love to start making my JavaScript code more modular using the new modules featur

Answer 1

[Note: I realise my answer is poor as it doesn't fully reflect the questioners intention to use ES6 modules via babeljs in a front-end workflow. Keeping the answer her for those that want to use ES6 modules within a webpage]

Try using jspm.io for loading the ES6 modules in the browser without transpiling upfront with babel. A plunker can be found here

jspm works on top on of system.js which tries to be a loader for any module format (ES6, AMD, CommonJS)..

To make this work in my browser, I based myself on this jspm ES6 demo. Just copied System.js and es6-module-loader.js in a js/lib folder and copied your es6 js files in the js folder. Then the html just looks like this:

    
        Test .. just open up the Chrome Devtools console to see the ES6 modules output using jspm
        
         

A plunker can be found here