在 React 组件中导入 Json 文件

Posted 2023-02-22

【中文标题】在 React 组件中导入 Json 文件

【英文标题】：import a Json file in a React Component

【发布时间】：2016-11-02 22:33:36

【问题描述】：

我正在尝试在 React 组件中加载 language.json 文件。当我想导入 json 文件时，我在第一步遇到以下错误。这是错误：

ERROR in ./app/languages.json
Module parse failed: /.../languages.json Unexpected token (1:12)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (1:12)
    at Parser.pp.raise (........)

我正在使用 webpack，这是配置文件：

   var path = require('path');
   var webpack = require('webpack');

   module.exports = 
       entry: ['./app/main.jsx'],
       devtool: 'cheap-module-eval-source-map',
       output:  path: __dirname+"/app", filename: 'bundle.js' ,
       module: 
           loaders: [
                 test: /\.jsx?$/,
                  loader: 'babel-loader',
                  query:  presets: ['es2015', 'react'] ,
                  include: path.join(__dirname, 'src')
              
          ]
      
  ;

我已经安装了这些软件包：

"babel-core": "^6.2.1",
"babel-loader": "^6.2.0",
"babel-preset-es2015": "^6.1.18",
"babel-preset-react": "^6.1.18"

这就是我尝试导入文件的方式（ES6 格式）：

import lang_code from '../../app/languages.json';

另外，我检查了 json 文件格式并验证了它！那么，您认为问题出在哪里？

【问题讨论】：

莎拉，我的回答对你有帮助吗？

@lux 是的！谢谢你的帮助。直到今天我都在度假，所以刚刚尝试了您的解决方案！ ;)

酷！只是想确保一切就绪！

【参考方案1】：

azium 是正确的，需要一个加载器，但这是一个很好的配置：

npm 命令

> npm install json-loader --save-dev

webpack.config.js

 module.exports = 
    ....
    resolve: 
        extensions: ['', '.js', '.jsx', '.json']
    ,
    ...
   module: 
       ...
            
                test: /\.json$/,
                loader: 'json'
            
       ...
   

通过将json 扩展名添加到resolve，您无需在import 语句中指定它。

【讨论】：

你的答案更好:)