React Browserify Babel - 意外的令牌错误答案

【问题标题】：React Browserify Babel - Unexpected token errorReact Browserify Babel - 意外的令牌错误
【发布时间】：2016-11-17 13:57:26
【问题描述】：

我正在尝试通过命令行使用 browserify 捆绑我的依赖项。该命令完成没有错误 - 据我所知，但加载页面会导致“意外令牌

这是我正在使用的命令：

browserify -t [ babelify --presets [ es2015 react ] ] main.js -o bundle.js

main.js

'use strict';
var React = require('react');
var ReactDom = require('react-dom');
var $ = require('jQuery');

JSX：

'use strict';

var React = require('react');
var ReactDom = require('react-dom');
var $ = require('jQuery');

class SideNav extends React.Component{
constructor(props) {
    super(props);
    this.state = {items: new Array()};

}
componentDidMount() {
    $.ajax({
        url:"/json/sidenav.json",
        dataType: "json",
        cache: false,
        success: function(data) {
            this.setState({items: data});
        }.bind(this)
    });
}
render() {
     var items = [];
     this.state.items.forEach((item) => {
         items.push(<NavItem title={item.title} link={item.link} active={item.active} />);
     });
    return (
        <ul className="nav nav-sidebar">
        {items}
        </ul>
    );
  }

}
class NavItem extends React.Component{
    render() {
        var clazz = this.props.active ? 'active' : '';
        var link = this.props.active ? 
                <a href="#">{this.props.title} <span className="sr-only">(current)</span></a> :
                <a href={this.props.link}>{this.props.title}</a>
        return (
            <li className={clazz}>{link}</li>
        );
    }
}

ReactDOM.render(
    <SideNav/>, 
    document.getElementById('sidenav')
);

【问题讨论】：

我觉得 jsx 的 babel 转换没有开始。尝试在 bundle.js 中搜索 <NavItem 以了解是否是这种情况。
否 - NavItem 不在 bundle.js 中
啊，当然是被丑化了。尝试在 bundle.js 中仅搜索 <，看看它是否在任何看起来像 JSX 语法的地方使用。
还没有被丑化....好像react和react dom都在那里
好的，但是你有没有在 bundle.js 中找到任何看起来像 JSX 的东西？

标签： reactjs browserify babeljs

【解决方案1】：

非常感谢 ArneHugo！他意识到我在我的 .hmtl 中包含了 JSX，这意味着它没有被转译。将其移至 main.js，然后修复错字即可解决问题。

【讨论】：