关于前端:ECMAScript-新提案JSON模块

新出了一个系列：Vue2 与 Vue3 技巧小册

有幻想，有干货，微信搜寻【大迁世界】关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。

ECMAScript 模块零碎 (import 和 export 关键字) 默认只能导入 JavaScript 代码。

然而，将应用程序的配置保留在一个 JSON 文件中往往很不便，因而，咱们可能想间接将 JSON 文件导入 ES 模块中。

长期以来，commonjs 模块格局反对导入 JSON。

好消息是，第三阶段的一个名为 JSON 模块的新提议，提出了一种将 JSON 导入到 ES 模块的办法。当初，咱们来看看 JSON 模块是如何工作的。

1. 导入 config.json.

假如，咱们有一个 config.json 文件，内容如下：

{
  "name": "My Application",
  "version": "v1.2"
}

如何将 config.json 导入 ES 模块？

例如，咱们创立一个简略的 Web 应用程序，从 JSON 配置文件中显示应用程序的名称和版本。

如果你试图间接导入 config.json，Node.js 会抛出一个谬误。

import http from 'http';
import config from './config.json';
http
  .createServer((req, res) => {res.write(`App name: ${config.name}\n`);
    res.write(`App version: ${config.version}`);
    res.end();})
  .listen(8080);

尝试运行应用程序时，node.js 抛出谬误 TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".json"

Node.js 在应用 import语句时，默认冀望的是 JavaScript 代码。但因为 JSON 模块的提议，你能够表明你要导入的数据类型：JSON。

在修复应用程序之前，咱们先来看看 JSON 模块提案有哪些内容。

2. JSON 模块提案

JSON 模块提案的实质是容许应用惯例的 import 语句在 ES 模块中导入 JSON 数据。

能够通过增加导入断言来导入 JSON 内容：

import jsonObject from "./file.json" assert {type: "json"};

assert {type: "json"}是一个导入断言，批示模块应该被解析和导入为 json。

jsonObject变量蕴含解析 file.json 的内容后创立的一般 JavaScript 对象。

一个 JSON 模块的内容是应用默认导入的，命名的导入不可用。

JSON 模块也能够动静导入：

const {default: jsonObject} = await import('./file.json', {
  assert: {type: 'json'}
});

当一个模块被动静导入时，包含一个 JSON 模块，默认的内容在 default 属性中可用。

在这种状况下，导入断言示意 JSON 类型。然而，有一个更通用的提议导入断言（目前在第 3 阶段），容许导入更多数据格式，如 CSS 模块。

3. 启用 JSON 模块

当初，咱们将 JSON 模块集成到 Web 应用程序中：

import http from 'http';
import config from './config.json' assert {type: "json"};
http
  .createServer((req, res) => {res.write(`App name: ${config.name}\n`);
    res.write(`App version: ${config.version}`);
    res.end();})
  .listen(8080);

主模块当初导入 config.json 文件，并拜访其值 config.name 和config.version。

JSON 模块工作在 Node.js 版本 >=17.1 中，也能够应用 --experimental-json-modules 标记启用 Experimental JSON 模块

node --experimental-json-modules index.mjs

在浏览器环境中，JSON 模块从 Chrome 91 开始可用。

4. 总结

默认状况下，ES 模块只能导入 JavaScript 代码。

因为 JSON 模块的提议，你能够间接将 JSON 内容导入到 ES 模块中。只有在导入语句后应用导入断言就能够了。

import jsonContent from "./file.json" assert {type: "json"};

你能够从 Node.js 17.1 开始应用 JSON 模块，应用实验性标记--experimental-json-modules，并在 Chrome 91 及以上版本中应用。

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

作者：Dmitri Pavlutin 译者：前端小智 起源：dmitripavlutin
原文：https://dmitripavlutin.com/ja…

交换

有幻想，有干货，微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588… 已收录，有一线大厂面试残缺考点、材料以及我的系列文章。