ECMAScript建议导入断言d的实例

121 阅读3分钟

ECMAScript提案 "导入断言"(由Myles Borins、Sven Sauleau、Dan Clark和Daniel Ehrenberg提出)引入了将元数据与导入语句关联的语法。在这篇博文中,我们将研究这看起来像什么以及为什么它是有用的。


导入断言

促使导入断言的用例是将JSON数据作为一个模块导入。这看起来如下(并在一个单独的提案中进一步说明):

import config from './data/config.json' assert { type: 'json' };

你可能想知道为什么JavaScript引擎不能使用文件名扩展名.json 来确定这是JSON数据。然而,网络的一个核心架构原则是绝不使用文件名扩展名来确定文件中的内容。相反,要使用内容类型。

因此,如果服务器配置了不正确的内容类型,就有可能做错导入。在导入位置指定必要的元数据可以解决这个问题。

在我们更详细地了解导入断言的工作方式之前,让我们来看看在JavaScript世界中导入非JavaScript工件的历史。

历史:将非JavaScript工件作为模块导入

将非 JavaScript 代码的工件作为模块导入,在 JavaScript 生态系统中有着悠久的传统。

例如,JavaScript模块加载器RequireJS就支持所谓的 插件.为了让你感觉到RequireJS有多老。1.0.0版本是在2009年发布的。通过插件导入的模块的指定器看起来像这样:

'«specifier-of-plugin-module»!«specifier-of-artifact»'

例如,下面的模块指定器将一个文件导入为JSON:

'json!./data/config.json'

受到RequireJS的启发,webpack支持同样的模块指定语法,用于其 装载器.

导入非JavaScript工件的用例

这些是导入非JavaScript工件的几个用例:

  • 导入JSON配置数据
  • 导入WebAssembly代码,就像它是一个JavaScript模块一样
  • 导入CSS来构建用户界面

对于更多的用例,你可以看一下webpack的加载器列表

导入断言的语法

让我们更详细地研究一下导入断言是什么样子的。

静态导入语句

我们已经看到了一个正常的(静态)导入语句:

import config from './data/config.json' assert { type: 'json' };

导入断言以关键字assert 开始。这个关键字后面是一个对象字面。目前,我们支持以下对象字面的特征:

  • 无引号键和引号键
  • 值必须是字符串

对键和值没有其他的语法限制,但我们鼓励引擎在不支持某个键和/或某个值时抛出一个异常。这使得在未来添加更多的功能变得更加容易,因为没有人会以意想不到的方式使用键和值。

动态导入

为了支持导入断言,动态导入得到了第二个参数--一个带有配置数据的对象:

import('./data/config.json', { assert: { type: 'json' } })

导入断言并不存在于顶层;它们是通过属性assert 。这使得在未来增加更多的配置选项成为可能。

再出口语句

一个再出口在一个步骤中导入和导出。对于前者,我们需要断言:

export { default as config } from './data/config.json' assert { type: 'json' };

即将推出的基于导入断言的功能

进口断言实际上只是语法。它们为利用该语法的实际功能奠定了基础。

JSON模块

第一个基于导入断言的功能可能是JSON模块

导入WebAssembly

导入断言是否会被用来支持从JavaScript直接导入WebAssembly,目前正在讨论中。如果它们被使用,我们可能将能够创建像这样的Web工作者:

new Worker('my-app.wasm', { type: 'module', assert: { type: 'webassembly' } })

而且我们还需要在HTML脚本元素中导入断言:

<script src="my-app.wasm" type="module" asserttype="webassembly"></script>