（node.js）（react.js）（webpack）（babel）未捕获的语法错误：意外的令牌导入

我试图通过发出命令

node server.js

来运行react应用程序，但它给出了一个错误：

未捕获的语法错误：意外的令牌导入包。js:47

package.json

   {
  "name": "helloreact",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "yash",
  "license": "ISC",
  "dependencies": {
    "express": "^4.14.0",
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "devDependencies": {
    "babel-core": "^6.21.0",
    "babel-loader": "^6.2.10",
    "babel-preset-es2015": "^6.18.0",
    "babel-preset-react": "^6.16.0",
    "webpack": "^1.14.0"
  }
}

我为bundle提供的webpack命令：

  webpack ./public/main.js ./public/bundle.js

main.js

   import Hello from './hello.jsx';
   import World from './world.jsx';

webpack.config.js

    var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CaseSensitivePathsPlugin = require('../index.js'); // use inside the npm package

// We use the NODE_ENV in our automation commands to differentiate environments
var production =
  process.env.NODE_ENV === 'production' ||
  process.env.NODE_ENV === 'preprod';

// Setup our plugins.
var plugins = [
  // attaches the webpack-generated JS to our main HTML file
  new HtmlWebpackPlugin({template: './src/index.html'}),
  // create global access to the NODE_ENV within our Webpacked code:
  new webpack.DefinePlugin({
    __ENV__: JSON.stringify(process.env.NODE_ENV)
  }),
  // http://gaearon.github.io/react-hot-loader/getstarted/
  new webpack.HotModuleReplacementPlugin(),
  // Mac doesn't care about case, but linux servers do, so enforce...
  new CaseSensitivePathsPlugin()
];

// In production we do a bit more...
if (production) {
  plugins.concat(
    [
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.OccurenceOrderPlugin(),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          warnings: false
        }
      })
    ]);
}

const devEntry = [
    'webpack-dev-server/client?http://0.0.0.0:3000', // tells client where to get hot reloads
    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
    'babel-polyfill', // for full ES6 compatibility on older devices
    './src/init.js'
  ];
const prodEntry = [
    'babel-polyfill', // for full ES6 compatibility on older devices
    './src/init.js'
];

const theEntry = (production) ? prodEntry : devEntry;

module.exports = {

  // Bundle to our dist folder as a main.js file.
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'main.js',
    publicPath: '/'
  },

  devtool: 'sourcemap',

  // Our master entry point.
  entry: theEntry,

  // Extra helpers to make require or include easier.
  resolve: {
    extensions: ['', '.js', '.jsx', '.json']
  },

  module: {
    loaders: [{
      test: /\.(js|jsx)$/,
      // in dev only, hotload
      loader: production ? 'babel' : 'react-hot!babel',
      // other babel options are specified in .babelrc
      exclude: /node_modules/
    }, {
      test: /\.json$/,
      loader: 'json'
    }]
  },

  plugins: plugins
};

---

babel

es2015

是否在任何地方设置了预设？（加载器选择或

.babelrc

文件）。如果没有，您必须安装/设置

babel-preset-es2015

才能使用导入语句。@mrlew是的，在.babelrcwell中设置它，一些传统的想法是：当您这样运行webpack cli时，您正在覆盖输入/输出选项。您应该在配置中指向main.js（src）和bundle.js（output），并且只从config文件夹运行webpack。您正在运行

node server.js

，但您的示例中预期生成的文件是

bundle.js

。如果您的服务器代码是用ES6编写的，则必须通过

babel node server.js

（

babel cli

应该安装）@OB3不使用ES5babel

es2015编写的文件在任何地方设置了预设？（加载器选择或
.babelrc
文件）。如果没有，您必须安装/设置
babel-preset-es2015
才能使用导入语句。@mrlew是的，在.babelrcwell中设置它，一些传统的想法是：当您这样运行webpack cli时，您正在覆盖输入/输出选项。您应该在配置中指向main.js（src）和bundle.js（output），并且只从config文件夹运行webpack。您正在运行
node server.js
，但您的示例中预期生成的文件是
bundle.js
。如果您的服务器代码是用ES6编写的，则必须通过
babel node server.js
（
babel cli
应该安装）@OB3不使用ES5编写