JavaScript中的JSON模块

ECMAScript模块系统（import 和export 关键字）默认只能导入JavaScript代码。

但是，把应用程序的配置保存在JSON文件里面往往很方便，因此，你可能想把JSON文件直接导入到ES模块中。

在很长一段时间里，导入JSON是由commonjs模块格式支持的。

幸运的是，在第三阶段的一个名为JSON模块的新提案提出了一种将JSON导入ES模块的方法。让我们看看JSON模块如何工作。

1.导入config.json

让我们从一个名为config.json 的JSON文件开始，它包含了一个应用程序的有用的配置值：名称和当前版本。

json

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

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

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

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

javascript

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" 。

当使用import 语句时，Node.js默认期望使用JavaScript代码。但由于JSON模块的提议，你可以表明你要导入的数据类型。JSON。

在修复应用程序之前，让我们用几句话看看什么是JSON模块提案。

2.JSON模块建议

JSON模块建议的本质是允许在ES模块内使用普通的import 语句导入JSON数据。

JSON内容可以通过添加一个导入断言来导入。

javascript

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

assert { type: "json" } 是一个导入断言，表明该模块应该被解析并作为JSON导入。

jsonObject 变量包含解析了的内容后创建的纯JavaScript对象。file.json

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

一个JSON模块也可以被动态地导入。

javascript

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

当一个模块被动态导入时，包括一个JSON模块，默认的内容可以在default 属性。

在这种情况下，导入断言表示一个JSON类型。然而，有一个更普遍的建议导入断言（目前处于第三阶段），允许导入更多的数据格式，如CSS模块。

3.启用JSON模块

现在，让我们把JSON模块整合到网络应用中。

javascript

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 标志来启用实验性JSON模块。

bash

node --experimental-json-modules index.mjs

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

4.总结

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

多亏了JSON模块的提议，你可以直接将JSON内容导入ES模块中。只需在导入语句后使用一个导入断言。

javascript

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

你可以从Node.js 17.1开始使用JSON模块，实验标志--experimental-json-modules ，并在Chrome 91及以上版本中使用。

JavaScript中的JSON模块介绍及应用

JavaScript中的JSON模块

1.导入config.json

2.JSON模块建议

3.启用JSON模块

4.总结