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

Posted 2023-02-22

【中文标题】在反应中导入json文件，webpack配置错误

【英文标题】：import json file in react, webpack config error

【发布时间】：2017-12-21 00:51:03

【问题描述】：

我正在尝试将 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，但后来我也遇到了错误。 而且文件夹结构是这样的

我该如何解决这个问题？

【参考方案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

【讨论】：

这可能是一种方法，但我的代码有什么问题？

【参考方案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。

【讨论】：

即使在做了上述事情之后，我也得到了同样的错误'无法解析../data.json