In previous recipes, we went over installation and configurations instructions to run a static file server using Python and configure a browser to use ES modules.
Creating an HTML page that loads an ECMAScript module
Getting ready
This recipe assumes that you have the static file server running in your working directory. If you haven't installed Python or configured your browser to work with ES modules, please see the first two recipes in the book.
The following steps will demonstrate how to create an ES module and load it into an HTML file.
How to do it...
- Create an hello.html file with a some text content:
<html>
<meta charset="UTF-8" />
<head>
</head>
<body>
Open Your Console!
</body>
</html>
- Open hello.html by opening your browser, and entering the following URL: http://localhost:8000/hello.html.
- You should see Open Your Console! displayed by the browser:
- Lets do what the page tells us and open up the Developer Console. For both Firefox and Chrome, the command is the same:
- On Windows and Linux:
Ctrl + Shift + I
- On macOS:
Cmd + Shift + I
- Next, in the same directory, create a file called hello.js, which exports a function named sayHi that writes a message to the console:
// hello.js
export function sayHi () {
console.log('Hello, World');
}
- Next add a script module tag to the head of hello.html that imports the sayHi method from hello.js (pay attention to the type value).
- Reload the browser window with the Developer Console open and you should see the hello message displayed as text:
How it works...
Although our browser can work with ES modules, we still need to specify that is how we want our code to be loaded. The older way of including script files uses type="text/javascript". This tells the browser to execute the content of the tag immediately (either from tag contents or from the src attribute).
By specifying type="module", we are telling the browser that this tag is an ES module. The code within this tag can import members from other modules. We imported the function sayHi from the hello module and executed it within that <script> tag. We'll dig into the import and export syntax in the next couple of recipes.
See also
- Exporting/importing multiple modules for external use
- Adding fallback script tags
