ECMAScript 模塊系統(tǒng)( import 和 export 關(guān)鍵字)默認(rèn)只能導(dǎo)入 JavaScript 代碼。
但是，將應(yīng)用程序的配置保存在一個JSON文件中往往很方便，因此，我們可能想直接將JSON文件導(dǎo)入ES模塊中。
長期以來，commonjs 模塊格式支持導(dǎo)入JSON。
好消息是，第三階段的一個名為JSON模塊的新提議，提出了一種將JSON導(dǎo)入到ES模塊的方法。現(xiàn)在，我們來看看JSON模塊是如何工作的。
1.導(dǎo)入 config.json.
假設(shè)，我們有一個 config.json 文件，內(nèi)容如下：
- {
- "name": "My Application",
- "version": "v1.2"
- }
如何將 config.json 導(dǎo)入ES模塊?
例如，我們創(chuàng)建一個簡單的Web應(yīng)用程序，從JSON配置文件中顯示應(yīng)用程序的名稱和版本。
如果你試圖直接導(dǎo)入 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);
嘗試運(yùn)行應(yīng)用程序時，node.js拋出錯誤 TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".json"
Node.js 在使用 import語句時，默認(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"}是一個導(dǎo)入斷言，指示模塊應(yīng)該被解析和導(dǎo)入為json。
jsonObject變量包含解析file.json的內(nèi)容后創(chuàng)建的普通JavaScript對象。
一個JSON模塊的內(nèi)容是使用默認(rèn)導(dǎo)入的，命名的導(dǎo)入不可用。
JSON模塊也可以動態(tài)導(dǎo)入：
- const { default: jsonObject } = await import('./file.json', {
- assert: {
- type: 'json'
- }
- });
當(dāng)一個模塊被動態(tài)導(dǎo)入時，包括一個JSON模塊，默認(rèn)的內(nèi)容在default屬性中可用。
在這種情況下，導(dǎo)入斷言表示JSON類型。但是，有一個更通用的提議導(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模塊，使用實驗性標(biāo)志--experimental-json-modules，并在Chrome 91及以上版本中使用。
作者：Dmitri Pavlutin 譯者：前端小智 來源：dmitripavlutin 原文：https://dmitripavlutin.com/javascript-json-modules/
原文鏈接：https://mp.weixin.qq.com/s/x3_QVU1LSehPAgrrxbNQ6Q
