导入json文件反应,webpack配置错误
我想导入一个json文件到我的代码。对于相同的JS文件是导入json文件反应,webpack配置错误
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配置文件就像是this--
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文件is--
var data={
"Author":"Dan Brown",
"Book":"Inferno",
}
module.exports=data;
我刚开始'无法解析data.json'错误,所以我在webpack的解析中添加了扩展。 现在也是,我收到相同
而且,我试着在里面的模块装载机[]添加JSON-装载机,后来还我得到的错误。 而文件夹结构是这样的
我该如何解决这个问题?
你可以试试下面的事情
1)增加 “JSON - 服务器”:在你的package.json 2 “^ 0.8.8”)开始与下面的命令
节点json的服务器。 /node_modules/json-server/bin/index.js --watch ./data/data.json--port 3001
3)使用任何ajax调用访问您的json文件。
你可以检查我的样本项目如下这里我实现了这个代码,因为你已经指定了不正确的路径
的WebPack没有找到你的data.json。 import data from './data.json'
将从与您的ExpenseApp
组件相同的目录中查找data.json,但根据您的屏幕截图,它是上面的一个级别。因此,进口声明应该是import data from '../data.json'
您的data.json文件也有可能导致您的其他问题的问题。 JSON是不是JavaScript,因此它不具有无功的或模块出口等..
{ "Author":"Dan Brown", "Book":"Inferno", }
是JSON的,一切有多余的,将可能使JSON装载机BARF因为它期待JSON,不是JavaScript。
即使在做了上述提及的事情之后,我也遇到了同样的错误'无法解析../data.json – Aayushi
这可以做到这一点,但我的代码有什么问题吗? – Aayushi