Webpack/babel 意外的令牌，应为“;”

Question

我正在尝试导入 JSON 文件，但是当我尝试加载我的 JSON 文件时，webpack 给了我一个错误。

./src/testData.json 中的错误 模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）： SyntaxError: C:\Users\Alex\Documents\Work\test-app\learn-fullstack-javascript\src\testData.json: Unexpected token, expected ";" (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
  > .......

Answer 1

可能你只需要从 webpack.config.json 文件中的test: /\.(js|jsx|json)$/ 中删除 jsx 和 json

 rules: [
    {
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets:['@babel/preset-env']
        }
      }
    }
  ]    

Answer 2

尝试从你的 webpack 配置中取出 json。你不需要 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' 
          }
        }
      ]
    }
  };