Javascript 使用webpack和babel在react路由器上意外导入令牌

我已经看到了很多关于这方面的问题，我基本上已经解决了所有的问题，但仍然没有解决我的问题。我正在尝试向我的reactjs应用程序添加一个简单的“react router”模块。我的密码是从

通过阅读类似文章的答案，我知道node.js还不支持es6模块语法。我正在尝试将Babel与es2015结合使用来解决这个问题

/src/app/index.js

import { Router, Route, browserHistory, Link } from 'react-router';

var path = require('path');

module.exports = {

entry: path.resolve(__dirname, 'src') + '/app/index.js',
output: {
    path: path.resolve(__dirname, 'dist') + '/app',
    filename: 'bundle.js',
    publicPath: '/app/'
},
module: {
    loaders: [
        {
            test: /\.js$/,
            include: path.resolve(__dirname, 'src'),
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015']
            }
        },
        {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }
    ]
}

我从其他答案中了解到，当我使用babel时，我需要一个.babelrc文件：

/.babelrc

{
  "preset": ['es2015', 'react']
}

这是我的webpack和package.json文件：

/webpack.config.js

import { Router, Route, browserHistory, Link } from 'react-router';

var path = require('path');

module.exports = {

entry: path.resolve(__dirname, 'src') + '/app/index.js',
output: {
    path: path.resolve(__dirname, 'dist') + '/app',
    filename: 'bundle.js',
    publicPath: '/app/'
},
module: {
    loaders: [
        {
            test: /\.js$/,
            include: path.resolve(__dirname, 'src'),
            loader: 'babel-loader',
            query: {
                presets: ['react', 'es2015']
            }
        },
        {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        }
    ]
}

})

/package.json

{
   "name": "react-playlist",
   "version": "1.0.0",
   "description": "A simple react to-do list",
   "main": "index.js",
   "scripts": {
       "test": "echo \"Error: no test specified\" && exit 1",
       "start": "npm run build",
       "build": "webpack -d && webpack-dev-server --content-base src/ --
       inline --hot --port 1234 --history-api-fallback"
   },
   "repository": {
      "type": "git",
      "url": "git+https://github.com/iamshaunjp/react-playlist.git"
   },
   "keywords": [
       "react"
   ],
   "author": "The Net Ninja",
   "license": "MIT",
   "bugs": {
      "url": "https://github.com/iamshaunjp/react-playlist/issues"
   },
   "homepage": "https://github.com/iamshaunjp/react-playlist#readme",
   "dependencies": {
       "babel-cli": "^6.26.0",
       "babel-polyfill": "^6.26.0",
       "babel-preset-node6": "^11.0.0",
       "react": "^15.3.2",
       "react-dom": "^15.3.2",
       "react-router": "^3.0.0"
    },
    "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^6.2.5",
        "babel-plugin-transform-es2015-modules-commonjs": "^6.26.0",
        "babel-preset-env": "^1.6.1",
        "babel-preset-es2015": "^6.16.0",
        "babel-preset-react": "^6.16.0",
        "css-loader": "^0.25.0",
        "style-loader": "^0.13.1",
        "webpack": "^1.13.2",
        "webpack-dev-server": "^1.16.1"
     }
}

这是我得到的错误：

import { Router, Route, browserHistory, Link } from 'react-router';
^^^^^^

SyntaxError: Unexpected token import

---

我做错了什么？

是什么命令导致了这个错误？在/src/app中运行“node index.js”这是客户端代码；您不应该使用Node运行它。你需要运行你的网页服务器。好的，我现在知道了。我忘了运行“npm start”，它允许我启动网页包服务器。另一方面，由于您添加了

.babelrc

文件，您不需要在网页包配置中为babel设置预设。