Webpack + React + Node-错误“意外的令牌导入”

Question

我是Reactjs和webpack的新手。 我正在尝试使用Node和React做一个示例应用程序。 我选择了Webpack作为模块捆绑器。
这是我的项目结构
项目

|--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源。 Node尚不支持ES6模块，因此这就是它因语法错误而失败的原因。

您可以使用Babel require挂钩自动为节点转换代码。 不要忘记在选项中指定'es2015'和'react'预设。