如何访问使用 Webpack 导入的 JSON 静态文件？答案

【问题标题】：How to access a JSON static file imported with Webpack?如何访问使用 Webpack 导入的 JSON 静态文件？
【发布时间】：2020-04-01 21:00:16
【问题描述】：

我的项目结构中有这个 JSON 静态文件：

someFile.json

JSON 是对象数组的字符串化版本：[{...},{...},etc]

我使用 Webpack (v 4.41.2) 将其导入为：

import '../someFile.json'; App.js 文件中

但是现在我想在我的应用程序中访问它，这样我就可以将它解析回数组并使用它。我该怎么做？

这似乎不起作用：

import myJSONfrom '../someFile.json';
const parsedJson = JSON.parse(myJSON);

function App() {
  // USE parsedJSON
}

我收到此错误：

Uncaught SyntaxError: Unexpected token u in JSON at position 0

JSON 文件内容：

[{"code":"STOCK","date":"2016-05-19T00:00:00.000Z","open":1240,"max":12430,"min":1240,"avg":12140,"close":12140,"numTrades":12,"amountTraded":120,"volume":121400,"quoteFactor":100},...OTHER OBJECTS....]

注意：这是一个 React 应用程序。

【问题讨论】：

导入的时候应该已经解析过了。只需将其视为常规 JSON 即可，无需解析。
谢谢！你说的对！刚刚发现！

标签： javascript json reactjs webpack

【解决方案1】：

刚刚发现出了什么问题。

import myJSON from '../someFile.json';     // THIS DOES WORK
// const parsedJson = JSON.parse(myJSON);  // DON'T DO THIS. IT'S ALREADY PARSED

function App() {
  // USE parsedJSON
}

所以基本上你可以这样做：

import parsedJSON from '../someFile.json';     // THIS DOES WORK

function App() {
  // USE parsedJSON
}

【讨论】：