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及以上版本中使用。
作者：Dmitri Pavlutin 譯者：前端小智 來源：dmitripavlutin 原文：https://dmitripavlutin.com/javascript-json-modules/
原文鏈接：https://mp.weixin.qq.com/s/x3_QVU1LSehPAgrrxbNQ6Q
