在react中導入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 加載器，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_modules/json-server/bin/index.js --watch ./data/data.json--端口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 data from '../data.json'

您的data.json文件還存在可能導致其他問題的問題。 JSON不是javascript，因此它沒有var或模塊導出等。

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

是JSON，還有其他所有其他功能，可能會像期望JSON而不是javascript一樣使JSON加載器出現故障。

Answer 3

將 JSON 文件作為模塊導入時，應使用 ES6 配置，即：

import XXX from "./myJsonFile.json" assert { type: "json" };

此外，您不需要導出 JSON 文件中的數據，只需將其作為 Object 或沒有名稱的數組，如下所示：

 [ "SELECT", "UPDATE", "DELETE", "SELECT", "TRUNCATE", "CREATE DATABASE", "CREATE SCHEMA", "CREATE TABLE ", "CREATE VIEW ", "CREATE TRIGGER", "CREATE_FUNCTION", "CREATE INDEX", "DROP DATABASE", "DROP SCHEMA", "DROP TABLE", "DROP VIEW", "DROP TRIGGER", "DROP FUNCTION", "DROP INDEX", "ALTER DATABASE", "ALTER SCHEMA", "ALTER TABLE", "ALTER VIEW", "ALTER TRIGGER", "ALTER FUNCTION", "ALTER INDEX", "UNKNOWN" ]

同樣在您的 HTML 文件中，將 (type="module") 添加到您的 js 文件的腳本標簽中。

這可能不是生產的最佳方式，但它是一個技巧。

我希望這有幫助。