用的WebPack

Question

编译时做出反应的错误，我有以下几点：

import React from 'react'; 
import Router from 'react-router'; 
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router'; 

import LoginHandler from './components/Login.js'; 

let App = React.createClass({ 
    render() { 
    return (
     <div className="nav"> 
     <Link to="app">Home</Link> 
     <Link to="login">Login</Link> 

     {/* this is the importTant part */} 
     <RouteHandler/> 
     </div> 
    ); 
    } 
}); 

let routes = ( 
    <Route name="app" path="/" handler={App}> 
    <Route name="login" path="/login" handler={LoginHandler}/> 
    </Route> 
); 

Router.run(routes, function (Handler) { 
    React.render(<Handler/>, document.body); 
}); 

当我运行 “NPM启动” 基于我的配置

：

var webpack = require('webpack'); 


module.exports = { 
    entry: [ 
     'webpack/hot/only-dev-server', 
     "./js/app.js" 
    ], 
    output: { 
     path: __dirname + '/build', 
     filename: "bundle.js" 
    }, 
    module: { 
     loaders: [ 
      { test: /\.js?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ }, 
      { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader'}, 
      { test: /\.css$/, loader: "style!css" } 
     ] 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin(), 
     new webpack.NoErrorsPlugin() 
    ] 

}; 

我收到以下错误：

./js/app.js 
Module build failed: SyntaxError: /Users/alessandrosantese/Documents/PROJECTS/react-router-16/js/app.js: Unexpected token (10:6) 
    8 | render() { 
    9 |  return (
> 10 |  <div className="nav"> 
    |  ^
    11 |   <Link to="app">Home</Link> 
    12 |   <Link to="login">Login</Link> 
    13 | 

Answer 1

我想你想让.js和.jsx都通过react-hot和babel，但你的模式匹配.j或.js（我认为你认为?是通配符，但在正则表达式这意味着“匹配前面的表达式0或1次”）。

试试这个：

test: /\.jsx?$/ 

Answer 2

我会建议你两个变化。

第一：

与react-hot，你需要transpile JSX babel loader您的WebPack。所以，你的测试改为

{ test: /\.jsx?$/, loaders: ['react-hot', 'babel'], exclude: /node_modules/ }, 

要同时检查.js和.jsx。

二：

代替React.render()使用ReactDOM.render()。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Router from 'react-router'; 
import { DefaultRoute, Link, Route, RouteHandler } from 'react-router'; 

import LoginHandler from './components/Login.js'; 

let App = React.createClass({ 
    render() { 
    return (
     <div className="nav"> 
     <Link to="app">Home</Link> 
     <Link to="login">Login</Link> 

     {/* this is the importTant part */} 
     <RouteHandler/> 
     </div> 
    ); 
    } 
}); 

let routes = ( 
    <Route name="app" path="/" handler={App}> 
    <Route name="login" path="/login" handler={LoginHandler}/> 
    </Route> 
); 

Router.run(routes, function (Handler) { 
    ReactDOM.render(<Handler/>, document.body); 
});