Reactjs React的JSX变压器不工作。Can'；我找不到错误_Reactjs_Gulp_Browserify_Babeljs_React Jsx

Reactjs React的JSX变压器不工作。Can'；我找不到错误

reactjs gulp

Reactjs React的JSX变压器不工作。Can'；我找不到错误,reactjs,gulp,browserify,babeljs,react-jsx,Reactjs,Gulp,Browserify,Babeljs,React Jsx,更新：我简直不敢相信。在经历了数小时的尝试后，我不明白为什么bundle.js的index.html中缺少了结束标记我真的被这件事难住了。我已经开始创建一个React.js应用程序，我不想使用HTML端的jsx transformer，而是要预编译它！目前我正在做以下工作： <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"> </script>

更新：我简直不敢相信。在经历了数小时的尝试后，我不明白为什么bundle.js的index.html中缺少了

结束标记

我真的被这件事难住了。我已经开始创建一个React.js应用程序，我不想使用HTML端的jsx transformer，而是要预编译它！目前我正在做以下工作：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js">
    </script>
    ....
    <script type="text/babel" src="build/bundle.js"/>

以及bundle.js：

完整index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learn react</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-     core/5.8.23/browser.js"></script>
    <script src="build/vendor.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500'    rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/app.css"/>
</head>
<body>
    <div id="mountPoint"/>
    <script type="text/babel" src="build/bundle.js"/>
</body>


学习反应

正如您所看到的，我在index.html的head标记中加载了vendor.js，我猜这也是与浏览器兼容的JavaScript

无论如何，我希望我提供了所有必要的信息。

您是否使用实际的es6语法？因为这是使用babel的唯一原因，但是如果您已经预编译了所有内容，（假设您预先使用es6）Transfile es6和babel es5，那么您只需在浏览器中加载bundle.js，而不使用任何其他魔法，那么您还是在预编译

这样你就可以摆脱babel浏览器了

根据reacts官方页面，babel似乎是在浏览器中传输jsx的唯一受支持的新方法。顺便说一句，我发现了错误，它是丢失的结束脚本标记。这是一个初学者的错误。是的，我不再使用巴别塔标签了。我现在已经成功预编译了。我有一个没有结束脚本标签的空白页。至于reactify：为什么要改变顺序？什么顺序？在绑定之前进行reactify？@danillo2k，reactify被弃用，取而代之的是babel。我仍然不理解reactify和bundling的顺序有什么问题。我是这样捆绑的：而且效果很好！是的，我读错了，我没有正确地查看您的pastebin，它已经被预编译：）（这里还很早：P）在您解决了问题后，您只需删除babel脚本标记，所以实际上您回答了您自己的问题，我的错：）但是@FakeRainBrigand关于reactify是正确的：）-无论如何，很高兴您解决了它

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learn react</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-     core/5.8.23/browser.js"></script>
    <script src="build/vendor.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500'    rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="css/app.css"/>
</head>
<body>
    <div id="mountPoint"/>
    <script type="text/babel" src="build/bundle.js"/>
</body>

-  so try using a normal scripttag if you arent using es6
-  if you are using es6 add the babel process to the gulp task
-  remove babel-browser completely ,u don't want to do that within the client on page load anyway,  it will decrease performance (just precompile)