厲害了，ECMAScript 新提案：JSON模組

前端小智發表於2021-12-28
JSON
作者：Dmitri Pavlutin
譯者：前端小智
來源：dmitripavlutin
有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

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"

image.png

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。

image.png

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及以上版本中使用。

程式碼部署後可能存在的BUG沒法實時知道，事後為了解決這些BUG，花了大量的時間進行log 除錯，這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文：https://dmitripavlutin.com/ja...

交流

有夢想，有乾貨，微信搜尋 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。

相關文章