Browserify & ReactJS 问题答案

【问题标题】：Browserify & ReactJS issueBrowserify & ReactJS 问题
【发布时间】：2014-09-22 17:57:32
【问题描述】：

无法让 Browserify 与 ReactJS 一起工作。我正在使用 watchify，虽然 browserify 做同样的事情：

watchify -t reactify app2.js -o ../build/app-brow.js

浏览器控制台在mywidget.js中显示此错误：

Uncaught SyntaxError: Unexpected token

app2.js

/** @jsx React.DOM */

var MyShow = require('./mywidget').MyWidget;

var myApp = React.createClass({
  render: function() {
    return (
      <div>
         MyShow: <MyShow />
        <LocalWidget />
      </div>
    );
  }
});

React.renderComponent((
  <myApp />
), document.body);

mywidget.js

var MyWidget = React.createClass({
  render: function() {
    return (
      <div>
      Testing "require MyWidget" Captain
      </div>
    );
  }
});

module.exports = MyWidget;

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello React</title>

    <script src="http://fb.me/react-0.11.1.js"></script>
    <script src="http://fb.me/JSXTransformer-0.11.1.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js"></script>

  </head>
  <body>
    This shows, but ReactJS shows errors in browser, console.
    <div id="content"></div>
     <script type="text/javascript" src="build/app-brow.js"></script>
  </body>
</html>

【问题讨论】：

我认为它可能从mywidget.js 中丢失了/** @jsx React.DOM */，但没有工作。还尝试将var React = require('react'); 添加到.js 文件中，仍然不行！
如果你想使用浏览器内的转换器，你需要指定type="text/jsx"，虽然这听起来不是你的意图。（在这种情况下，您不需要 JSXTransformer.js。）
有点 OT，看看我的 React + browserify + gulp 模板：gist.github.com/fkling/e34147a800b085a17563
顺便说一下，RequireJS/AMD 是不同的，你使用的是 browserify/CommonJS。
我将 RequireJS 包含在 index.html 这个标签中：<script src="http://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.14/require.js">。你的意思是 Browserify 把 RequireJS 变成了 CommonJS 模块？

标签： javascript reactjs browserify

【解决方案1】：

在 mywidget.js 你有这个：

module.exports = MyWidget;

当你需要一个文件时，你会得到module.exports的值。

所以这条线实际上是在做未定义的 MyWidget.MyWidget。

var MyShow = require('./mywidget').MyWidget;

您应该只删除最后的.MyWidget。

var MyShow = require('./mywidget');

mywidget.js 文件中还缺少 /** @jsx React.DOM */，这会导致 SyntaxError。

旁注：删除 JSXTransformer，你不需要它，因为你正在使用 reactify。

【讨论】：

搞定了！感谢您删除 JSXTransformer 脚本标签，好电话！

【解决方案2】：

我已经使用 gulp 和 browserfy 制作了一个 ReactJS 的基本组件。这个博客可以帮助你制作 React 组件HelloReactComponent

【讨论】：