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.
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.
- 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:
Ctrl + Shift + I
- On macOS:
Cmd + Shift + I
- Next, in the same directory, create a file called
hello.js
, which exports a function namedsayHi
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 thesayHi
method fromhello.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:
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.