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

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

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

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

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

使用ES模块导入JSON已于2020年年中作为特性提交给TC39，并且(在此编辑时)处于第3阶段，这是被接受到规范之前的最后一个阶段(更多详细信息请参阅https://github.com/tc39/proposal-json-modules)。一旦登陆，你将能够使用它作为:

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

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

如果你正在使用一个足够现代的捆绑器(如esbuild或类似的)，或者你正在使用一个足够现代的转译器(如babel)，那么你已经可以使用这个语法，而不必担心支持。

或者，如果你拥有JSON文件的所有权，你也可以将你的JSON转换成有效的JS文件，只需要最少的额外代码:

config.js

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

然后……

import config from '../config.js'

不允许导入现有的.json文件，但执行一个工作。

我使用babel+browserify，我有一个JSON文件在目录。/i18n/locale-en。带有翻译名称空间的json(用于ngTranslate)。

无需从JSON文件中导出任何内容(顺便说一句，这是不可能的)，我可以使用以下语法对其内容进行默认导入:

import translationsJSON from './i18n/locale-en';

有点晚了，但我只是在尝试为我的web应用程序提供分析时遇到了同样的问题，涉及基于包发送应用程序版本。json版本。

配置如下:React + Redux, Webpack 3.5.6

自从Webpack 2+以来，json加载器就没怎么做了，所以在摆弄了一番之后，我最终删除了它。

就是这样:

  fetch('../../package.json')
.then(resp => resp.json())
.then((packageJson) => {
console.log(packageJson.version);
});

请记住，既然我们在谈论包装。这个文件通常不会捆绑在你的产品版本中(甚至在开发版本中)，所以你在使用fetch时必须使用CopyWebpackPlugin来访问它。

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

// Babel


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

如果你使用node，你可以:

const fs = require('fs');


const { config } = JSON.parse(fs.readFileSync('../config.json'));

或

const evaluation = require('../config.json');
// evaluation will then contain all props, so evaluation.config
// or you could use:
const { config } = require('../config.json');

其他:

// config.js
{
// json object here
}


// script.js


import { config } from '../config.js';

或

import * from '../config.json'

根据您的构建工具和JSON文件中的数据结构，可能需要导入default. xml文件。

import { default as config } from '../config.json';

例如，在Next.js中使用

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

目前，我们不能import文件与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内容。

简单地这样做:

import * as importedConfig from '../config.json';

然后像下面这样使用它:

const config = importedConfig.default;

对于NodeJS v12及以上版本，--experimental-json-modules可以做到这一点，不需要babel的任何帮助。

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

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

但是你可以:

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

在Node.js中，可以使用require读取JSON文件，即使是在ES模块中。我发现这在读取其他包中的文件时特别有用，因为它利用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版本号。

我用它来安装插件“babel-plugin-inline-json-import”;然后在.balberc中添加插件。

1. < p >安装插件

   NPM install——save-dev babel-plugin-inline-json-import

2. 配置插件在babelrc

   < p >“plugin":( “inline-json-import" ) < / p >

这是我使用它的代码

import es from './es.json'
import en from './en.json'


export const dictionary = { es, en }

导入JSON文件仍处于实验阶段。它可以通过下面的标志来支持。

——experimental-json-modules

否则，你可以直接用fs加载相对于import.meta.url的JSON文件:-

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

你也可以使用module.createRequire()

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

我使用

• Vuejs，版本:2.6.12
• Vuex，版本:3.6.0
• Vuex-i18n，版本:1.13.1。

我的解决方案是:

messages.js:

import Vue from 'vue'
import Vuex from 'vuex';
import vuexI18n from 'vuex-i18n';
import translationsPl from './messages_pl'
import translationsEn from './messages_en'


Vue.use(Vuex);


export const messages = new Vuex.Store();


Vue.use(vuexI18n.plugin, messages);


Vue.i18n.add('en', translationsEn);
Vue.i18n.add('pl', translationsPl);


Vue.i18n.set('pl');

messages_pl.json:

{
"loadingSpinner.text:"Ładowanie..."
}

messages_en.json:

{
"loadingSpinner.default.text":"Loading..."
}

majn.js

import {messages} from './i18n/messages'
Vue.use(messages);

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

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

感谢所有提出并实现JSON模块和进口的断言的人。从Chrome 91开始，你可以直接导入JSON，例如:

// test.json
{
"hello": "world"
}


// Static Import
import json from "./test.json" assert { type: "json" };
console.log(json.hello);


// Dynamic Import
const { default: json } = await import("./test.json", { assert: { type: "json" } });
console.log(json.hello);


// Dynamic Import
import("./test.json", { assert: { type: "json" } })
.then(module => console.log(module.default.hello));

注意:其他浏览器目前可能还没有实现这个特性。

正如Azad所说，正确的答案是使用fs. readfilesync()(或任何异步变量，如fs. readfilesync())加载文件。使用callback或fs.promises.readFile使用promises/await，然后使用JSON.parse()解析JSON

const packageJsonRaw = fs.readFileSync('location/to/package.json' )
const packageJson = JSON.parse(packageJsonRaw )

Webpack/Babel选项是不实用的，除非你已经在使用它了。

一个更优雅的解决方案是使用CommonJS的require函数

createRequire构造了一个CommonJS的require函数，这样你就可以使用典型的CommonJS特性，比如读取JSON

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

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

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

/ / count.json

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

let filePath = '../../data/my-file.json'


let arrayImport = await import(filePath, {
assert: { type: "json" },
});
const inputArray = arrayImport.default


console.log('result', inputArray)

更多信息:v8 -动态导入()。