本篇文章带大家了解一下ecmascript 新提案：json模块，来看看json模块是如何工作的，希望对大家有所帮助！
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及以上版本中使用。
更多编程相关知识，请访问：编程视频！！
以上就是深入聊聊javascript中的json模块的详细内容。