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＆＃39;首先是错误所以我在webpack的解析中添加了扩展名。现在，我也是如此

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

我该如何解决这个问题？

Answer 1

你可以尝试以下事情

1）在你的package.json中添加＆＃34; json-server＆＃34;：＆＃34; ^ 0.8.8＆＃34;， 2）使用以下命令启动json服务器

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

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

你可以检查我的示例项目，如下所示我实现了这段代码

https://docs.python.org/3.5/library/winsound.html

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加载器barf，因为它期望JSON，而不是javascript。

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

2 个答案: