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

我在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

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

注意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

<!-- 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>

改动之后，屏幕上还是展示"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后缀，就可以忽略后缀。比如这个例子，可以在浏览器打开看一下会返回什么

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

重点是你import的地址(写在引号里面的)，必须是某一个服务的javaScript资源。

阿古达木

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