Javascript 网页配置babel错误，其他答案不起作用

我试图在我的windows计算机上设置React with webpack，但我收到一个非常常见错误的奇怪响应。我有一个“Uncaught SyntaxError:Unexpected token import”错误，每个人似乎都会在stackoverflow上询问这个错误，但我想我已经研究了每个问题，没有一个对其他人有效的解决方案对我有效

我已将babel-preset-es2015和es2016添加到我的package.json中：

{
"name": "360",
"version": "1.0.0",
"description": "360 video viewer",
"main": "/src/index.js",
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "compile": "./node_modules/.bin/webpack",
  "build": "webpack",
  "start": "webpack-dev-server"
},
"author": "DottoraQN",
"license": "ISC",
"dependencies": {
  "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
  "jquery": "^3.2.1",
  "react": "^15.5.4",
  "react-dom": "^15.5.4"
},
"devDependencies": {
  "babel-cli": "^6.24.1",
  "babel-core": "^6.25.0",
  "babel-loader": "^7.0.0",
  "babel-preset-es2016": "^6.24.1",
  "html-webpack-plugin": "^2.28.0",
  "webpack": "^2.6.1",
  "webpack-dev-server": "^2.4.5"
  }
}

我已将这两个选项添加到我的.alrc中：

{"presets": ["es2015", "es2016", "react"]}

我已经确保在我的webpack.config.js文件中正确指定了babel：

var webpack = require('webpack');
var path = require('path');

var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
    template: __dirname + '/build/index.html',
    filename: 'index.html',
    inject: 'body'
});

var config = {
  entry: __dirname + '/src/index.js',
  output: {
     path: __dirname + '/build',
     filename: 'bundle.js'
  },
  module: {
    loaders: [{
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
           presets: ['es2015', 'react']
        }
    }]
  },
  plugins: [HTMLWebpackPluginConfig]
};

module.exports = config;

我的代码非常简单，我只是想在我的本地主机服务器中显示“hello world”，这实际上是可行的！但是，代码仍然抛出此错误，并在其他地方导致无法识别的函数

我真的很抱歉再次问这个问题，但正如我所说的，其他答案对我来说根本不起作用，我不确定我做错了什么。我对react和es6比较陌生，我在课堂上学习了一个codecade，想尝试用react编写我的网站，因为我喜欢模块化格式。谢谢你的帮助和耐心

编辑：

这是我的index.js/React模块：

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Viewer from './Viewer';

//var React = require('react');
//var ReactDOM = require('react-dom');
//var Viewer = require('./Viewer');

ReactDOM.render(
  <Viewer />,
  document.getElementById('app')
);

//Viewer.js
import React from 'react';

export default class Viewer extends React.Component {
    parseMe () {
        $.getJSON("images.json", function(images) {
            console.log(images);
        });
    }

    render () {
        return (<div>
            <p>Hello World</p>
            </div>);
    }
}

//index.js
从“React”导入React；
从“react dom”导入react dom；
从“/Viewer”导入查看器；
//var React=要求（'React'）；
//var ReactDOM=require（'react-dom'）；
//var Viewer=require（“./Viewer”）；
ReactDOM.render(
,
document.getElementById（'app'）
);
//Viewer.js
从“React”导入React；
导出默认类查看器扩展React.Component{
解析我（）{
$.getJSON（“images.json”，函数（images）{
控制台日志（图像）；
});
}
渲染（）{
返回(
你好，世界

);
}
}

函数parseMe（）当前未被使用，因为它实际上无法处理我当前遇到的错误

回答：

---

其实没有。在对这个问题的评论中，您可以看到另一个用户接受了我的项目并克隆了它，它对他们来说运行良好。我刚刚重新安装了节点模块，一切都开始工作。

你能发布index.js中的内容吗？或者你是如何编写react代码的，因为我刚刚复制了你的配置并用它运行了基本的react hello world应用程序。它工作得非常好。（我正在使用node 6）@roxxypoxy poster:）有趣的是，它在我这边起作用了。如果它有帮助的话，这对我来说是有效的，这正是你所拥有的。嗯，我不知道我们的两个项目目录有什么不同，但我从github下载了你的，它可以工作，而我的仍然不能。感谢您的帮助，尽管我的文件结构似乎有一些随意的错误：）