在浏览器中使用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后缀,就可以忽略后缀。比如这个例子,可以在浏览器打开看一下会返回什么

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

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

你可能感兴趣的