首页 > 编程语言> > javascript – Browserify和ReactJS问题

javascript – Browserify和ReactJS问题

2019-08-30 15:42:21 作者：互联网

无法使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中你有这个：

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.

标签：javascript,reactjs,browserify
来源： https://codeday.me/bug/20190830/1769362.html