app.jsx 中的未定义<。使用 React.js、React Router 和 webpack

Question

我一直很难做出反应。我已经包含了app.jsx和webpack文件。我总是在'<'中出错在app.jsx的render函数中。我在服务器端使用nodeexpress。

错误如下：

apple$ webpack -w
Version: webpack 1.12.9
Time: 28ms
   [0] ./app/js/app.jsx 0 bytes [built] [failed]
ERROR in ./app/js/app.jsx
Module parse failed: /Users/apple/Desktop/cs360/myLdsCallings/app/js/app.jsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import React from 'react'
| import render from 'react-dom'
| import Route from 'react-router'

这是网络包文件

var webpack = require('webpack')
var path = require('path')

module.exports = {
   devtool: 'inline-source-map',

    entry: "./app/js/app.jsx",
    output: {
        path: "./build",
        filename: "build.js"
    },
    module: { 
    test: /.jsx?$/, 
    exclude: /node_modules/, 
    loader: "babel", 
    query:
      {
        presets:['es2015','react']
      }
}
}

app.jsx

import React from 'react'
import render from 'react-dom'
import Route from 'react-router'
import IndexRoute from 'react-router'
import Router from 'react-router'
import App from '../components/App'
import Current from '../components/Current'
import Actions from '../components/Actions'
import Dashboard from '../components/Dashboard'
import MyActions from '../components/MyActions'
import Without from '../components/Without'
import GlobalNav from '../components/GlobalNav'
import Profile from '../components/Profile'

var routes = (
  <Router>
    <Route path='/' component={App}>
      <IndexRoute component={App} />
      <Route path='Current' component={Current} />
      <Route path='Dashboard' component={Dashboard} />
      <Route path='Actions' component={Actions} />
      <Route path='MyActions' component={MyActions} />
      <Route path='Without' component={Without} />
      <Route path='GlobalNav' component={GlobalNav} />
      <Route path='Profile' component={Profile} />
    </Route>
  </Router>
);

ReactDom.render(routes, document.getElementById('content')
)

Answer 1

文件存在多个问题：

1. module对象内部应该有一个loaders数组，并且只有在那里才能指定加载器
2. （已修复）您使用的正则表达式不包括jsx文件，而仅包括js文件
3. （也已修复）对于babel 6，您需要安装并指定加载程序的预设-在您的情况下，您将es2015语法与jsx一起使用

这应该是上述所有修复的结果：

{ 
    test: /.jsx?$/,  <--- note that we are testing for jsx and js files.
    exclude: /node_modules/, 
    loader: "babel", 
    query:
      {
        presets:['es2015', 'react']
      }
}

不要忘记npm install --save-dev babel-preset-react和npm install --save-dev babel-preset-es2015