原文：Super Simple Start to ESModules in the Browser by Kent C. Dodds.
我在js还没有modules的时代就开始写js了，当EcmaScript标准发表要反对modules的时候我很冲动。然而我晓得规范与落地之间还有很长很长的路要走，我就又有一点悲观了。
当初，所有支流浏览器反对ES Modules曾经有一阵了，上面让我来展现一下超级简略的ES Modules起手例子
首先，创立第一js文件
// append-div.jsfunction 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.jsimport {appendDiv} from './append-div.js'function go() { appendDiv('Hello from async script')}export {go}接下来咱们能够用动静import语法
// script-src.jsimport {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资源。