@babel/plugin-transform-json-modules
非官方测试版翻译
本页面由 PageTurner AI 翻译（测试版）。未经项目官方认可。 发现错误？ 报告问题 →
将 import ... with { type: "json" } 声明转换为平台特定的 API 实现，通过读取文件内容后执行 JSON.parse 解析导入的 JSON 文件。
此插件应用的转换取决于顶层的 targets 配置，用于检测生成的代码应兼容 Node.js、浏览器或两者兼顾。当目标环境为 Node.js 时，生成的代码还会根据是否将模块编译为 CommonJS 而有所不同。
注意
此插件在将模块编译为 AMD、SystemJS 或 UMD 时不可用。
注意
此插件仅转换静态导入声明，不处理动态 import() 调用。
示例
input.js
import data from "./data.json" with { type: "json" };
将被转换为
- Browsers
- Node.js (ESM)
- Node.js (CommonJS)
- Browsers and Node.js (ESM)
output.js
const data = await fetch(import.meta.resolve("./data.json")).then(r => r.json());
output.mjs
import { readFileSync as _readFileSync } from "fs";
const data = JSON.parse(_readFileSync(new URL(import.meta.resolve("./data.json"))));
output.cjs
"use strict";
const data = JSON.parse(require("fs").readFileSync(require.resolve("./data.json")));
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
- Yarn
- pnpm
- Bun
npm install --save-dev @babel/plugin-transform-json-modules
yarn add --dev @babel/plugin-transform-json-modules
pnpm add --save-dev @babel/plugin-transform-json-modules
bun add --dev @babel/plugin-transform-json-modules
用法
通过配置文件（推荐）
babel.config.json
{
"plugins": ["@babel/plugin-transform-json-modules"]
}
通过命令行
Shell
babel --plugins=@babel/plugin-transform-json-modules script.js
通过 Node API
JavaScript
require("@babel/core").transformSync("code", {
plugins: ["@babel/plugin-transform-json-modules"],
});
配置选项
uncheckedRequire
类型：boolean
默认值：false
添加版本：v7.25.0
设为 true 时，插件将直接使用 require 导入 JSON 文件以生成更简洁的输出。当目标环境为 CommonJS 时，此选项产生的代码更易被打包器分析，但不会校验导入的模块是否为合法 JSON：
输入
import data from "./data.json" with { type: "json" };
输出 (未启用 uncheckedRequire: true)
const data = JSON.parse(require("fs").readFileSync(require.resolve("./data.json")));
输出 (启用 uncheckedRequire: true)
const data = require("./data.json");