JavaScript中的JSON模塊怎么用

這篇文章主要為大家展示了“JavaScript中的JSON模塊怎么用”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“JavaScript中的JSON模塊怎么用”這篇文章吧。

ECMAScript 模塊系統(tǒng)( import 和 export 關(guān)鍵字)默認(rèn)只能導(dǎo)入 JavaScript 代碼。

但是，將應(yīng)用程序的配置保存在一個(gè)JSON文件中往往很方便，因此，我們可能想直接將JSON文件導(dǎo)入ES模塊中。

長(zhǎng)期以來(lái)，commonjs 模塊格式支持導(dǎo)入JSON。

好消息是，第三階段的一個(gè)名為JSON模塊的新提議，提出了一種將JSON導(dǎo)入到ES模塊的方法?，F(xiàn)在，我們來(lái)看看JSON模塊是如何工作的。

1.導(dǎo)入 config.json

假設(shè)，我們有一個(gè) config.json 文件，內(nèi)容如下：

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

如何將 config.json 導(dǎo)入ES模塊？

例如，我們創(chuàng)建一個(gè)簡(jiǎn)單的Web應(yīng)用程序，從JSON配置文件中顯示應(yīng)用程序的名稱(chēng)和版本。

如果你試圖直接導(dǎo)入 config.json ，Node.js會(huì)拋出一個(gè)錯(cuò)誤。

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);

嘗試運(yùn)行應(yīng)用程序時(shí)，node.js拋出錯(cuò)誤 TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".json"

Node.js 在使用 import語(yǔ)句時(shí)，默認(rèn)期望的是JavaScript代碼。但由于JSON模塊的提議，你可以表明你要導(dǎo)入的數(shù)據(jù)類(lèi)型：JSON。

在修復(fù)應(yīng)用程序之前，我們先來(lái)看看JSON模塊提案有哪些內(nèi)容。

2. JSON 模塊提案

JSON模塊提案的本質(zhì)是允許使用常規(guī)的import語(yǔ)句在ES模塊中導(dǎo)入JSON數(shù)據(jù)。

可以通過(guò)添加導(dǎo)入斷言來(lái)導(dǎo)入JSON內(nèi)容：

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

assert {type: "json"}是一個(gè)導(dǎo)入斷言，指示模塊應(yīng)該被解析和導(dǎo)入為json。

jsonObject變量包含解析file.json的內(nèi)容后創(chuàng)建的普通JavaScript對(duì)象。

一個(gè)JSON模塊的內(nèi)容是使用默認(rèn)導(dǎo)入的，命名的導(dǎo)入不可用。

JSON模塊也可以動(dòng)態(tài)導(dǎo)入：

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

當(dāng)一個(gè)模塊被動(dòng)態(tài)導(dǎo)入時(shí)，包括一個(gè)JSON模塊，默認(rèn)的內(nèi)容在default屬性中可用。

在這種情況下，導(dǎo)入斷言表示JSON類(lèi)型。但是，有一個(gè)更通用的提議導(dǎo)入斷言（目前在第3階段），允許導(dǎo)入更多數(shù)據(jù)格式，如CSS模塊。

3. 啟用JSON模塊

現(xiàn)在，我們將JSON模塊集成到Web應(yīng)用程序中：

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);

主模塊現(xiàn)在導(dǎo)入config.json文件，并訪問(wèn)其值config.name和config.version。

JSON模塊工作在Node.js版本>=17.1中，也可以使用--experimental-json-modules標(biāo)志啟用Experimental JSON模塊

node --experimental-json-modules index.mjs

在瀏覽器環(huán)境中，JSON模塊從Chrome 91開(kāi)始可用。

4.總結(jié)

默認(rèn)情況下，ES模塊只能導(dǎo)入JavaScript代碼。

由于JSON模塊的提議，你可以直接將JSON內(nèi)容導(dǎo)入到ES模塊中。只要在導(dǎo)入語(yǔ)句后使用導(dǎo)入斷言就可以了。

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

你可以從Node.js 17.1開(kāi)始使用JSON模塊，使用實(shí)驗(yàn)性標(biāo)志--experimental-json-modules，并在Chrome 91及以上版本中使用。

以上是“JavaScript中的JSON模塊怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！