在浏览器中使用ESModules，超级简单在浏览器中使用ESModules，超级

原文： Super Simple Start to ESModules in the Browser by Kent C. Dodds.

我在js还没有modules的时代就开始写js了，当EcmaScript规范宣布要支持modules的时候我很激动。但是我知道标准与落地之间还有很长很长的路要走，我就又有一点失望了。
现在，所有主流浏览器支持ES Modules已经有一阵了，下面让我来展示一下超级简单的ES Modules起手例子
首先，创建第一js文件

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

接下来，创建一个HTML文件引入js

注意type="module"这个属性。我们想让浏览器把一段js代码当作module而不是script脚本，只需要这个字段。是module还是script脚本，在运行时会有一写区别，这个后面我补充，现在只要知道，我们可以用modeule就行啦！
在上面的行内script代码中，我们从append-div.js中引入了appenDiv方法。不幸的是，为了引入module，我们不能直接在浏览器打开html本地访问，必须启动一个本地服务来跑。如果你装了nodejs，直接在终端中找到文件所在目录，运行下面这个命令来启动一个服务
npx serve
终端中会打印出一运行信息，然后你就可以在浏览器打开地址了。随即屏幕上会展示"Hello from inline script"，大功告成，我们真正的加载了一个EcmaScript Module
通常情况我们不会在html写行内js，所以，让我们加载一个moduel

改动之后，屏幕上还是展示"Hello from external script"
有一点要强调，import语句后面的.js必须加。有人可能被nodejs和babel宠坏了，不习惯写后缀。在modeuls规范中，后缀是必须带上的。
我来展示一下动态加载，新增一个js文件

// async-script.js import {appendDiv} from './append-div.js'function go() { appendDiv('Hello from async script') }export {go}

接下来我们可以用动态import语法

// 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 }, )

动态引入同样也需要补全地址(待后缀)，
声明一下，重点不是带不带后缀，而是指定浏览器以什么方式去请求这个地址。需要返回以一个可以被当作javaScript执行的text文件.
这意味着如果你恰好有一个url，返回javaScript文件，但是没有.js后缀，就可以忽略后缀。比如这个例子，可以在浏览器打开看一下会返回什么