在反应中导入json文件，webpack配置错误

Question

我正在尝试将 json 文件导入到我的代码中。同样的js文件是

import React from 'react';
import ReactDom from 'react-dom' ;
import $ from 'jquery' ;
import data from './data.json';

class ExpenseApp extends React.Component{
  render(){
    return(
        <div>{data.Author}</div>
      )
  }
}


ReactDom.render(<ExpenseApp/>,document.getElementById('container'));

我已经安装了 json loader 并且 webpack 配置文件是这样的--

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

var node_dir = __dirname + '/node_modules',
    lib_dir = __dirname + '/public/libraries';

var config = {
    // The resolve.alias object takes require expressions 
    // (require('react')) as keys and filepath to actual
    // module as values
    resolve: {
        alias: {
            react: lib_dir + '/react',
            "react-dom": lib_dir + '/react-dom',
            "jquery": lib_dir + '/jquery-3.2.1.js'
        },
        extensions:['','.js','.jsx','.json']
    },
    plugins: [

        new webpack.optimize.CommonsChunkPlugin({ // 
            name: 'vendors',
            filename: 'build/vendors.bundle.js',
            minChunks: 2,
        }),

        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ],

    entry: {
        musicApp: ['./public/js/expense-app.js', 'webpack/hot/only-dev-server'],
        vendors: ['react', 'react-dom', 'jquery', 'webpack/hot/only-dev-server']
    },

    output: {
        path: path.join(__dirname, "public"),
        filename: 'build/[name].bundle.js',
        libraryTarget: "umd"
    },

    module: {

        noParse: [
            new RegExp(lib_dir + './react.js'), 
            new RegExp(lib_dir + './react-dom.js')
        ],
        rules: [
             {
                test: /\.js?$/,

                loaders: ['react-hot-loader/webpack', 'babel-loader'],
                include: path.join(__dirname, 'public')

            }, 
            {
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015']
                },
                include: path.join(__dirname, 'public')
            }
        ]
    }
}

module.exports = config;

data.json 文件是--

var data={
    "Author":"Dan Brown",
    "Book":"Inferno",
}
module.exports=data;

一开始我收到“无法解析 data.json”错误，所以我添加了扩展来解析 webpack。 现在，我也一样

另外，我尝试在模块内的 loaders[] 中添加 json-loader，但后来我也遇到了错误。 而且文件夹结构是这样的

我该如何解决这个问题？

Answer 1

你可以试试下面的东西

1) 在你的 package.json 中添加 "json-server": "^0.8.8" 2）使用以下命令启动 json 服务器

node ./node_modules/json-server/bin/index.js --watch ./data/data.json--port 3001

3) 使用任何 ajax 调用访问您的 json 文件。

您可以检查我的示例项目，如下所示，我在其中实现了此代码

https://github.com/johibkhan2/react-redux-singlePageApp

Answer 2

Webpack 找不到您的 data.json，因为您指定了错误的路径。 import data from './data.json' 将从与您的 ExpenseApp 组件相同的目录中查找 data.json，但根据您的屏幕截图，它位于上一层。所以import语句应该是import data from '../data.json'

您的 data.json 文件也有可能导致您的其他问题的问题。 JSON 不是 javascript，因此它没有 var 或模块导出等...

{ "Author":"Dan Brown", "Book":"Inferno", }

是 JSON，其他所有内容都是额外的，并且可能会使 JSON 加载器出错，因为它期望 JSON，而不是 javascript。