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 hook自动转换节点的代码。不要忘记在选项中指定'es2015'和'react'预设。

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

1 个答案: