React browserify 打包 ReactJs 报错

michael · 2015年10月31日 · 最后由 rubyless 回复于 2016年02月02日 · 8109 次阅读

main.js

/** @jsx React.DOM */

var React = require('react');
var ReactDOM = require('react-dom');

// tutorial1.js
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
mic@gentoo ~/projects/react $ browserify -t babelify js/main.js -o static/bundle.js
SyntaxError: /home/mic/projects/react/js/main.js: Unexpected token (9:6)
   7 |   render: function() {
   8 |     return (
>  9 |       <div className="commentBox">
     |       ^
  10 |         Hello, world! I am a CommentBox.
  11 |       </div>
  12 |     );
    at Parser.pp.raise (/home/mic/projects/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:24:13)
    at Parser.pp.unexpected (/home/mic/projects/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:91:8)
    at Parser.pp.parseExprAtom (/home/mic/projects/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:507:12)
    at Parser.pp.parseExprSubscripts (/home/mic/projects/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:260:19)
    at Parser.pp.parseMaybeUnary (/home/mic/projects/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:240:19)
    at Parser.pp.parseExprOps (/home/mic/projects/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:171:19)
    at Parser.pp.parseMaybeConditional (/home/mic/projects/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:153:19)
    at Parser.pp.parseMaybeAssign (/home/mic/projects/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:120:19)
    at Parser.pp.parseParenAndDistinguishExpression (/home/mic/projects/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:562:26)
    at Parser.pp.parseExprAtom (/home/mic/projects/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:464:19)

请问是什么问题?

JSX 没编译到 JS。

rei 说的没错……目前使用browserify打包JSX,ES6之类的都必须先编译成es5然后再后续打包

建议用 webpack,会方便很多。

需要 登录 后方可回复, 如果你还没有账号请 注册新账号