我正在尝试导入JSON文件，但是当我尝试加载JSON文件时，webpack会给我一个错误。
./src/testData.json中的错误模块构建失败（来自./node_modules/babel-loader/lib/index.js）：语法错误：C：\ Users \ Alex \ Documents \ Work \ test \ app \ learn-fullstack- javascript \ src \ testData.json：意外的令牌，预期为“;” （3:12）
我尝试更改babel和webpack配置文件，但无法解决该问题。
这是我的配置文件：webpack.config.js
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx|json)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets:['@babel/preset-env']
}
}
}
]
}
};
babel.config.js
module.exports = {
presets: ['@babel/preset-env', '@babel/react'],
};
.babelrc
{
"presets": [
"@babel/preset-env",
"@babel/react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
最后我的package.json
{
"name": "learjs",
"version": "1.0.0",
"description": "For an up-to-date configuration guide: [jscomplete.com/reactful](https://jscomplete.com/reactful)",
"main": "index.js",
"scripts": {
"start": "nodemon --exec babel-node server.js --ignore public/",
"dev": "webpack-dev-server"
},
"repository": {
"type": "git",
"url": "git+https://github.com/jscomplete/learn-fullstack-javascript.git"
},
"author": "",
"license": "ISC",
"bugs": {
"url": "https://github.com/jscomplete/learn-fullstack-javascript/issues"
},
"homepage": "https://github.com/jscomplete/learn-fullstack-javascript#readme",
"dependencies": {
"@babel-preset-node7": "^1.5.0",
"@babel/register": "^7.4.0",
"braces": "^2.3.2",
"ejs": "^2.6.1",
"express": "^4.16.4",
"mongodb": "^3.2.3",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"webpack-dev-server": "^3.3.1"
},
"devDependencies": {
"@babel-core": "^7.0.0-bridge.0",
"@babel-eslint": "^10.0.1",
"@babel-jest": "^24.7.1",
"@babel-loader": "^8.0.0-beta.6",
"@babel/cli": "^7.4.3",
"@babel/core": "^7.4.3",
"@babel/node": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.4.0",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/preset-env": "^7.4.3",
"@babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-loader": "^8.0.5",
"eslint": "^5.16.0",
"eslint-plugin-react": "^7.12.4",
"html-webpack-plugin": "^3.2.0",
"json-loader": "^0.5.7",
"nodemon": "^1.18.11",
"regenerator-runtime": "^0.13.2",
"webpack": "^4.30.0",
"webpack-cli": "^3.3.0"
},
"resolutions": {
"babel-core": "7.0.0-bridge.0"
}
}
{
"contests": [
{
"id": 1,
"categoryName": "Business/Company",
"contestName": "Cognitive Building Bricks"
},
{
"id": 2,
"categoryName": "Magazine/Newsletter",
"contestName": "Educating people about sustainable food production"
},
{
"id": 3,
"categoryName": "Software Component",
"contestName": "Big Data Analytics for Cash Circulation"
},
{
"id": 4,
"categoryName": "Website",
"contestName": "Free programming books"
}
]
}
我期待在chrome开发工具中获得类似的东西。
Object i
contents: Array[4]
> 0: Object
> .......
尝试json从Webpack配置中取出。您不需要babel-loader来处理json，可以使用json-loader
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets:['@babel/preset-env']
}
}
},
{
test: /\.json$/,
exclude: /node_modules/,
use: {
// included by default (https://webpack.js.org/loaders/json-loader/)
loader: 'json-loader'
}
}
]
}
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句