在React组件中导入一个Json文件

Question

我正在尝试在React组件中加载languages.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文件格式并进行了验证！那么，你认为问题出在哪里？

- Birish

---

Sarah，我的回答有帮到你吗？ - lux

@lux 是的！谢谢你的帮助。我一直在度假，今天才尝试了你的解决方案！;) - Birish

太棒了！只是想确认一下你是否准备好了！ - lux

Answer 1

azium正确指出需要使用加载器，但以下是为了保险起见的配置信息： npm命令

> npm install json-loader --save-dev

webpack.config.js

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

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

- lux

---

你的答案更好 :) - azium