Browserify & ReactJS 问题
Posted
技术标签:
【中文标题】Browserify & ReactJS 问题【英文标题】：Browserify & ReactJS issue 【发布时间】：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 模块？
【参考方案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
【讨论】：
以上是关于Browserify & ReactJS 问题的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Browserify & iOS JavaScriptCore
前端模块化开发学习之gulp&browserify篇
如何使用 node 和 browserify 实现 jQuery.panzoom