Webpack + React + Node - エラー "予期しないトークンのインポート"

Question

私はReactjsとwebpackの初心者です。私はNode and Reactを使ってサンプルアプリケーションをやろうとしています。私はモジュールバンドラーとしてWebpackを選択しました。
は、これは私のプロジェクトのstructue
プロジェクト

|--index.html 
|--package.json 
|--server.js 
|--webpack.config.js 
|--app/main.js  
|--app/routes.js  
|--app/components/login.js 

package.jsonの内容

{ 
 
    "version": "1.0.0", 
 
    "description": "learn", 
 
    "main": "server.js", 
 
    "dependencies": { 
 
    "body-parser": "^1.14.1", 
 
    "bootstrap": "^3.3.7", 
 
    "express": "^4.14.0", 
 
    "react": "^15.3.2", 
 
    "react-dom": "^15.3.2", 
 
    "react-router": "^2.8.1" 
 
    }, 
 
    "devDependencies": { 
 
    "babel-cli": "^6.16.0", 
 
    "babel-core": "^6.17.0", 
 
    "babel-loader": "^6.2.5", 
 
    "babel-preset-es2015": "^6.16.0", 
 
    "babel-preset-react": "^6.1.18", 
 
    "babel-register": "^6.3.13", 
 
    "babelify": "^7.2.0", 
 
    "nodemon": "^1.11.0", 
 
    "webpack": "^1.13.2" 
 
    }, 
 
    "scripts": { 
 
    "watch": "nodemon server.js", 
 
    "start": "node server.js" 
 
    } 
 
}

ですwebpack.config.jsのの

内容

module.exports = { 
 
    context: __dirname + "/app", 
 
    entry: "./main.js", 
 
    output: { 
 

 
     filename: "./build/bundle.js" 
 
    }, 
 
    resolve: { 
 
     extensions: ['', '.js', '.jsx'] 
 
    }, 
 
    module: { 
 
     loaders: [ 
 
      { 
 
       test: /\.jsx?$/, 
 
       exclude: /node_modules/, 
 
       loader: "babel", 
 
       query: { 
 
        presets: ['react', 'es2015'] 
 
       } 
 
      } 
 
     ] 
 
    } 
 
}

server.js

var express = require('express'); 
 
var path = require('path'); 
 
var React = require('react'); 
 
var ReactDOM = require('react-dom'); 
 
var Router = require('react-router'); 
 
var routes = require('./app/routes'); 
 

 
var app = express(); 
 

 
app.set('port', process.env.PORT || 3000); 
 
app.listen(app.get('port'), function() { 
 
    console.log('Express server listening on port ' + app.get('port')); 
 
}); 
 

 
app.get('/',function(req, res) { 
 
    res.send('Hello'); 
 
}); 
 

 
app.get('/login',function(req, res) { 
 
    res.send('Login page using react'); 
 
});

main.js

import React from 'react'; 
 
import Router from 'react-router'; 
 
import ReactDOM from 'react-dom'; 
 
import routes from './routes'; 
 

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

routes.js

import React from 'react'; 
 
import {Route} from 'react-router'; 
 
import Login from './components/login'; 
 
//import Home from './components/Home'; 
 

 
export default (
 
    <Route path="/login" component={Login}> 
 

 
    </Route> 
 
);

login.js

import React from 'react'; 
 
import ReactDOM from 'react-dom'; 
 

 
class Login extends React.Component { 
 
    render() { 
 
     return (
 
      <div className="container"> 
 
       <div className="row"> 
 
        <div className="col-sm-5"> 
 
         <strong>Username</strong> 
 
        </div> 
 
        <div className="col-sm-5"> 
 
         <input type='text' className='form-control'/> 
 
        </div> 
 
       </div> 
 

 
      </div> 
 
     ) 
 
    } 
 
} 
 

 
export default Login;

When I do "webpack -w" seems to be working fine. 

when trying to start node using "npm start", says 

    /Project/app/routes.js:1 
    (function (exports, require, module, __filename, __dirname) { import React from 'react'; ^^^^^^ 
    SyntaxError: Unexpected token import 

I have no idea about why node is not picking up babel's import? Couldn't find anything on the internet and hence posting this question. I badly need a help. 

ありがとうございます。

Answer 1

あなたのwebpack設定はあなたのフロントエンドコードをトランケイル（およびバンドル）するだけです。 npm startと入力すると、node.jsはserver.jsを実行し、JSXソースが含まれます。ノードはまだES6モジュールをサポートしていないので、構文エラーで失敗します。

Babel require hookを使用して、ノードのコードを自動的にトランシルバーにすることができます。オプションに'es2015'と'react'のプリセットを指定することを忘れないでください。