@babel/plugin-proposal-json-modules

將 import ... with { type: "json" } 宣告轉換為特定平台的 API，以讀取並 JSON.parse 匯入的檔案。

此外掛套件套用的轉換取決於您的頂層 targets，用於偵測產生的程式碼是否應與 Node.js、瀏覽器或兩者相容。當目標為 Node.js 時，產生的程式碼也會根據您是否將模組編譯為 CommonJS 而有所不同。

注意

編譯模組為 AMD、SystemJS 或 UMD 時，無法使用此外掛程式。

注意

此外掛程式僅轉換匯入宣告，而非動態 import() 呼叫。

範例

input.js

import data from "./data.json" with { type: "json" };

將轉換為

瀏覽器

output.js

const data = await fetch(import.meta.resolve("./data.json")).then(r => r.json());

Node.js (ESM)

output.mjs

import { readFileSync as _readFileSync } from "fs";
const data = JSON.parse(_readFileSync(new URL(import.meta.resolve("./data.json"))));

Node.js (CommonJS)

output.cjs

"use strict";

const data = JSON.parse(require("fs").readFileSync(require.resolve("./data.json")));

瀏覽器和 Node.js (ESM)

output.js

const data = await (
  typeof process === "object" && process.versions?.node
    ? import("fs").then(fs => fs.promises.readFile(new URL(import.meta.resolve("./data.json")))).then(JSON.parse)
    : fetch(import.meta.resolve("./data.json")).then(r => r.json())
);

安裝

npm

npm install --save-dev @babel/plugin-proposal-json-modules

Yarn

yarn add --dev @babel/plugin-proposal-json-modules

pnpm

pnpm add --save-dev @babel/plugin-proposal-json-modules

使用

使用設定檔（建議）

babel.config.json

{
  "plugins": [
    "@babel/plugin-proposal-json-modules"
  ]
}

透過 CLI

Shell

babel --plugins=@babel/plugin-proposal-json-modules script.js

透過 Node API

JavaScript

require("@babel/core").transformSync("code", {
  plugins: [
    "@babel/plugin-proposal-json-modules"
  ],
});

參考

• 提案：JSON 模組