如何在ECMAScript 6中导入JSON文件？

Question

如何访问ECMAScript 6中的JSON文件？

以下操作不起作用：

import config from '../config.json'

如果我尝试导入一个JavaScript文件，这很好。

Answer 1

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

有很多方法可以做到这一点。根据您的需要，您可以查看如何在JavaScript中读取文件（如果您在浏览器中运行，则可以选择FileReader），也可以使用其他问题中描述的其他加载程序（假设您使用的是NodeJS）。

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

此外，值得注意的是，如果您使用的是Webpack，那么JSON文件的导入在默认情况下也会起作用（因为Webpack

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

Answer 2

2020年中期，使用ES模块导入JSON作为功能提交给TC39，并且（在本次编辑时）处于第3阶段，这是在被接受为规范之前的最后一个阶段（参见https://github.com/tc39/proposal-json-modules了解更多详细信息）。着陆后，您可以将其用作：

import someName from "./some/path/to/your/file.json";

其中，someName实际上是JSON数据描述的JS对象的变量名。（当然，请注意，这将从JSON源导入JavaScript，而不是“导入JSON”）。

如果您使用的是足够现代的捆绑程序（如esbuild等）或最新的transpiler（如babel），那么您就可以使用这种语法，而无需担心支持问题。

或者，如果您拥有JSON文件的所有权，您还可以使用最少的额外代码将JSON转换为有效的JS文件：

配置。js公司

export default
{
  // my json here...
}

然后

import config from '../config.js'

不允许导入现有。json文件，但执行作业。

Answer 3

在TypeScript或使用Babel中，您可以在代码中导入json文件。

// Babel

import * as data from './example.json';
const word = data.name;
console.log(word); // output 'testing'

参考号：https://hackernoon.com/import-json-into-typescript-8d465beded79