[[442155]]

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

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

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

好消息是，第三階段的一個(gè)名為JSON模塊的新提議，提出了一種將JSON導(dǎo)入到ES模塊的方法?，F(xiàn)在，我們來看看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)用程序的名稱和版本。

如果你試圖直接導(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語句時(shí)，默認(rèn)期望的是JavaScript代碼。但由于JSON模塊的提議，你可以表明你要導(dǎo)入的數(shù)據(jù)類型：JSON。

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

2. JSON 模塊提案

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

可以通過添加導(dǎo)入斷言來導(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類型。但是，有一個(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文件，并訪問其值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開始可用。

4.總結(jié)

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

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

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

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

作者：Dmitri Pavlutin 譯者：前端小智 來源：dmitripavlutin 原文：https://dmitripavlutin.com/javascript-json-modules/