Using ESModules in the browser is super easy

Original: Super Simple Start to ESModules in the Browser by Kent C. Dodds .

I started writing js when there was no modules in js. I was very excited when the EcmaScript specification announced that it would support modules. But I know that there is still a long, long way to go between standards and landing, and I am a little disappointed again.

Now, all major browsers have supported ES Modules for a while, let me show you a super simple starting example of ES Modules.

First, create the first js file

// append-div.js
function appendDiv(message) {
  const div = document.createElement('div')
  div.textContent = message
  document.body.appendChild(div)
}

export {appendDiv}

Next, create an HTML file to introduce js

<!-- index.html -->
<script type="module">
  import {appendDiv} from './append-div.js'
  appendDiv('Hello from inline script')
</script>

Note the attribute type="module" We want the browser to treat a piece of js code as a module instead of a script, only this field is needed. Whether it is a module or a script script, there will be a difference when it is running. I will add this later. Now as long as we know, we can use a modeule!

In the above inline script code, we introduced the appenDiv method from append-div.js. Unfortunately, in order to introduce the module, we cannot open the html local access directly in the browser, and must start a local service to run it. If you have installed nodejs, find the directory where the file is located directly in the terminal, and run the following command to start a service

npx serve

A running information will be printed out in the terminal, and then you can open the address in the browser. Then "Hello from inline script" will be displayed on the screen, and you are done, we have actually loaded an EcmaScript Module🎉

Usually we don’t write inline js in html, so let’s load a moduel

<!-- index.html -->
<script type="module">
  import {appendDiv} from './append-div.js'
  appendDiv('Hello from inline script')
</script>
<script type="module" src="./script-src.js"></script>

After the change, "Hello from external script" is still displayed on the screen

It should be emphasized, import statement following .js must be added. Some people may be spoiled by nodejs and babel and are not used to writing suffixes. In the modeuls specification, the suffix is required.

Let me show you dynamic loading and add a js file

// async-script.js
import {appendDiv} from './append-div.js'

function go() {
  appendDiv('Hello from async script')
}

export {go}

Next we can use dynamic import syntax

// script-src.js
import {appendDiv} from './append-div.js'

appendDiv('Hello from external script')

import('./async-script.js').then(
  moduleExports => {
    moduleExports.go()
  },
  error => {
    console.error('there was an error loading the script')
    throw error
  },
)

Dynamic introduction also needs to complete the address (to be suffixed),
To declare, the point is not to bring or not suffix, but to specify how the browser will request this address. Need to return a text file that can be executed as javaScript.

This means that if you happen to have a url and return a javaScript file, but there is no .js suffix, you can ignore the suffix. For example, in this example, you can open it in the browser to see what will be returned

import * as d3 from 'https://unpkg.com/d3?module'

The point is that the address of your import (written in quotation marks) must be a JavaScript resource of a certain service.