Running ES2015 modules in the browser

There are different approaches to run the code with ES2015 in the browser. The first one is to ship the traditional bundle (a JavaScript file with our code transpiled to ES5). We can create a bundle using popular tools such as Browserify or Webpack. In this case, we create the distribution file (bundle), and in our HTML file, we import it as any other JavaScript code:

<script src="./lib/17-ES2015-ES6-Modules-bundle.js"></script> 

The ES2015 modules support finally landed in browsers at the beginning of 2017. At the time of writing this book, it is still experimental and not supported by all modern browsers. The current support for this feature (and how to enable it in an experimental mode) can be verified at http://caniuse.com/#feat=es6-module, as shown in the following screenshot:

To use the import keyword in the browser, first, we need to update our code by adding the .js extension in the import as follows:

import * as area from './17-CalcArea.js';  
import Book from './17-Book.js'; 

Secondly, to import the modules we created, we simply need to add type="module" inside the script tag:

<script type="module" src="17-ES2015-ES6-Modules.js"></script> 

If we execute the code and open the Developer Tools | Network tab, we will be able to see that all the files we created were loaded:

To keep backward compatibility with browsers that do not support this functionality, we can use nomodule:

<script nomodule src="./lib/17-ES2015-ES6-Modules-bundle.js"></script>

Until this feature is officially supported by most modern browsers, we still need to use a bundler tool to transpile ES2015+.