Importing modules from the internet

Time Box

Activity	Time
Reading	0.5 hours
Exercise	1 hour

One of the most exciting aspects of modules is that they make it easy to use code that you didn't have to write.

Since many publicly available Javascript libraries were published long before ESM was available, you have to make sure the library you want to use is formatted correctly for use directly in the browser.

There are some Content Delivery Networks (CDNs) that specialise in delivering ESM, like jsDelivr, Skypack and esm.sh.

For example, there is a package on npm called canvas-confetti, the documentation here talks about using a package-manager (npm), and a bundler etc, but because CDNs exist that automatically repackage npm packages as ESM modules, we can use the package directly from the browser without any special tooling.

import confetti from 'https://cdn.skypack.dev/canvas-confetti'
// ... or we could use one of the other services
//   import confetti from 'https://esm.run/canvas-confetti'
confetti()

Have a look around npm for other fun packages, some tags you can start looking:

Remember, many of the packages on npm are not intended to work well in the browser, so read the docs first.

Exercise

Create a folder called import-from-web with index.html and main.js files, and use skypack to import an npm package and demo some functionality. One option is the animation library motion.

In their documentation, they will give you an import that looks like this:

// NOPE! This is not for us
import { animate } from 'motion'

This has an assumption that you're using a bundler, package manager, import-map or some other fancy tooling.

We're going to use native JavaScript Modules and skypack to import the library.

// YES! This is more our style
import { animate } from 'https://cdn.skypack.dev/motion'

This might help you get started.

<!DOCTYPE html>
  <html>

  <head>
    <title>Motion One example</title>
    <meta charset="UTF-8" />
  </head>

  <body>
  <style>
  body {
    background: black;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
  }

  #box {
    width: 100px;
    height: 100px;
    border-radius: 10px;
    background-color: pink;
  }
  </style>
  <div id="box"></div>
  </body>
  <!-- You will probably pull this javascript out into its own file -->
  <script type="module">
    import { animate } from "https://cdn.skypack.dev/motion"

    animate(
      "#box",
      { x: 100, rotate: 45 },
      { duration: 0.5 }
    )
  </script>
</html>

... or if you want to make some noise, here's a starter for tone.js

<button id="StartButton">Start</button>
<script type="module">
  import * as Tone from 'https://esm.run/tone'

  // create a synth and connect it to the main output (your speakers)
  const synth = new Tone.Synth().toDestination()

  // JavaScript is only allowed to initiate sound with a user event
  // this is to prevent people from making extremely annoying websites
  const button = document.querySelector('#StartButton')
  button.addEventListener('click', () => {
    Tone.start()
    // play a middle 'C' for the duration of an 8th note
    synth.triggerAttackRelease('C4', '8n')
  })
</script>

Remember to run npx vite in the root folder of your project and open the url it logs to your terminal (usually http://localhost:5173/).

If you open an HTML file directly from your browser, it uses the file:// protocol and a lot of web features including JavaScript Modules do not work with the file:// protocol.

So always develop with a web server.

Import and export in more detail

NodeJS and Common JS