如何在ECMAScript 6导入JSON文件?

如何在ECMAScript 6中访问JSON文件?

以下选项无效:

import config from '../config.json'

如果我试图导入一个JavaScript文件，这可以正常工作。

https://www.stefanjudis.com/snippets/how-to-import-json-files-in-es-modules-node-js/

ES模块在Node.js领域仍然相当新(它们从Node 14开始就很稳定)。模块带有内置的模块系统，以及顶级等待等特性。

我读了Pawel Grzybek写的一篇关于ES模块的文章，了解到现在不能在ES模块中导入JSON文件。

import info from `./package.json` assert { type: `json` };


const { default: info } = await import("./package.json", {
  assert: {
    type: "json",
  },
});

这真的很糟糕，因为我非常习惯在Node.js中执行诸如const data = require('./some-file.json')之类的require调用。

但是现在你能在Node.js中使用导入断言吗?

在撰写本文时，当前的Node.js LTS (v18.12)仍然将导入断言标记为实验性。

这篇文章解释了在ES模块中处理JSON的方法，如果你还不想使用实验特性的话。

选项1:自己读取和解析JSON文件

Node.js文档建议使用fs模块，自己完成读取文件和解析的工作。

import { readFile } from 'fs/promises';
const json = JSON.parse(
  await readFile(
    new URL('./some-file.json', import.meta.url)
  )
);

选项2:利用CommonJS的require函数来加载JSON文件

文档还说明了可以使用createRequire加载JSON文件。这种方法是Pawel在他的博客文章中建议的方法。

createRequire允许你构造一个CommonJS require函数来使用典型的CommonJS特性，比如在Node.js EcmaScript模块中读取JSON。

import { createRequire } from "module";
const require = createRequire(import.meta.url);
const data = require("./data.json");

当前回答

在Node.js中，即使在ES模块中，也可以使用require读取JSON文件。我发现这在读取其他包中的文件时特别有用，因为它利用Node自己的模块解析策略来定位文件。

ES模块中的require必须首先使用createRequire创建。

下面是一个完整的例子:

import { createRequire } from 'module';

const require = createRequire(import.meta.url);
const packageJson = require('typescript/package.json');
console.log(`You have TypeScript version ${packageJson.version} installed.`);

在一个安装了TypeScript的项目中，上面的代码将从package.json中读取并打印TypeScript版本号。

2020-12-12 09:53:40

其他回答

带有json扩展名的文件结构用于传输数据，json文件数据可以通过使用fetch命令发送请求在本地检索。

在下面的例子中，计数的数据。收到Json文件

/ / count.json

fetch("./count.json") 
.then((response) => { return response.json(); }) 
.then((data) => console.log(data));

2022-03-04 12:29:52

从"./resource.json "导入数据可以在Chrome 91中实现。现在支持JSON模块。这允许开发人员静态地导入JSON，而不是依赖于fetch()函数动态地检索它。

https://www.stefanjudis.com/snippets/how-to-import-json-files-in-es-modules/

2021-05-25 16:56:50

在一个带有fetch的浏览器中(基本上现在都有了):

目前，我们不能导入JSON mime类型的文件，只能导入JavaScript mime类型的文件。这可能是将来添加的一个功能(官方讨论)。

fetch('./file.json')
  .then(response => response.json())
  .then(obj => console.log(obj))

在Node.js v13.2+:

它目前需要——experimental-json-modules标志，否则默认情况下不支持。

尝试运行

node --input-type module --experimental-json-modules --eval "import obj from './file.json'; console.log(obj)"

并查看输出到控制台的obj内容。

2020-03-21 03:56:55

不幸的是，ES6/ES2015不支持通过模块导入语法加载JSON。但是…

有很多方法可以做到这一点。根据您的需要，您可以研究如何在JavaScript(窗口)中读取文件。如果您在浏览器中运行，FileReader可以是一个选项)或使用其他问题中描述的其他加载器(假设您使用的是NodeJS)。

在我看来，最简单的方法可能是将JSON作为JS对象放入ES6模块并导出它。这样，您就可以在需要的地方导入它。

此外，值得注意的是，如果你使用Webpack，导入JSON文件将默认工作(因为Webpack >= v2.0.0)。

import config from '../config.json';

2016-01-22 12:10:10

对于NodeJS v12及以上版本，——experimental-json-modules就可以了，不需要babel的任何帮助。

https://nodejs.org/docs/latest-v14.x/api/esm.html#esm_experimental_json_modules

但是它是以commonjs的形式导入的，所以还不支持从'c.json'导入{a, b}。

但是你可以:

import c from 'c.json';
const { a, b } = c;

2020-11-11 01:38:00

如何在ECMAScript 6导入JSON文件?

推荐文章

最新文章

标签