乐趣区

关于javascript:在浏览器中使用ESModules超级简单

jiezi

原文：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 资源。

退出移动版