@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 模块