关于javascript:在浏览器中使用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

<!-- 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资源。