如何修复 babel 反应“Uncaught SyntaxError: Unexpected token <”答案

【问题标题】：How to fix babel react "Uncaught SyntaxError: Unexpected token <"如何修复 babel 反应“Uncaught SyntaxError: Unexpected token <”
【发布时间】：2016-10-20 16:10:57
【问题描述】：

我在通过 CDN 设置反应时遇到问题。

她是我的html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="css/main.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js"></script>
    <script src="js/app.js"></script>

</head>
<body>
    <div id="container">
    </div>
</body>
</html>

这里是我的 app.js：

var myItems = {
    items:
        ["Widget","Gear","Sprocket","Spring","Crank","Lever","Hose","Tube",
            "Wheel","Housing","Case"]
}

var FilteredList = React.createClass({

    filterList: function (event) {
        var updatedList = this.props.initialItems.items;

        updatedList = updatedList.filter(function (item) {
            return item.toLowerCase().search(event.target.value.toLowerCase()) !== 1;
        });

        this.setState({items: updatedList});
    },

    getInitialState: function(){
        return {
            items: []
        }
    },

    componentWillMount: function(){
        this.setState({items: this.props.initialItems.items})
    },

    render: function(){
        return (
            <div className="myList">
                <input type="text" placeholder="Search" onChange={this.filterList} />

                <List items={this.state.items}/>

            </div>
        );
    }
});

var List = React.createClass({
    render: function(){
        return (
            <ul>
                {
                    this.props.items.map(function (item) {
                        return <li key={item}>{item}</li>;
                    })
                }
            </ul>
        );
    }
});

ReactDOM.render(<FilteredList initialItems={myItems} />,
    document.getElementById('container'));

运行时出现以下错误：

app.js:31 Uncaught SyntaxError: Unexpected token <

知道怎么解决吗？

【问题讨论】：

您是如何将 babel 与您的应用程序集成的。您是使用 webpack 还是 gulp 作为构建器。我认为这是您的 jsx 转换的问题。

标签： javascript reactjs babeljs jsx

【解决方案1】：

即使您已将 babel-standalone 添加到您的页面，您仍然需要告诉它转译您的 app.js 文件。

您可以通过将type="text/babel" 添加到您的脚本标签来做到这一点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="css/main.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.7.7/babel.min.js">    </script>
    <script type="text/babel" src="js/app.js"></script>

</head>
<body>
    <div id="container">
    </div>
</body>
</html>

仅供参考，您还可以将代码内联转译为：

Babel.transform(input, { presets: ['es2015'] }).code;

【讨论】：

首先，感谢您的回答（赞成！）。你能解释一下为什么会这样以及为什么构建最终会产生如此糟糕的结果吗？
浏览器不知道如何解析 JSX。 Babel 负责将 JSX 转换为浏览器可以理解的东西。如果没有在 script 标签中添加 type="text/babel"，babel 不会转换脚本中的代码，因此 JSX 代码保持原样，浏览器会抛出错误。在幕后，Babel 将 JSX 转换为 React.createElement 调用。你可以在这里试试：babeljs.io/repl
它有效。但是，我不确定如何使用 npm 像这样分发它。