ReactJS 代码上的无效令牌 < 运行 browserify

Question

这真的很荒谬，但我还是坚持要运行 :

var React = require('react');
var AppBar = require('./node-modules/material-ui/lib/app-bar') ; 
var Card = require('./node-modules/material-ui/lib/card') ; 

var MyComponent = React.createClass({
    render: function(){
        return (
            <h1>Hello, world!</h1>
        );
    }
});

React.render(
    <MyComponent /> , 
    document.getElementById("header") 
);

我试图通过安装 browserify 和 babelify 包并使用各自的预设调用它们来遵循文档，如 here, but no matter what combination of options or presets i use, it keeps complaining about "<" characters preceding HTML tags. i tried running it with the es2015 preset as suggested in this github 线程中那样，但这没有帮助要么。

哦，这是我调用的命令及其产生的错误：

browserify index.jsx -o bundle.js -t babelify --presets es2015 react                                                                                                                              
SyntaxError: /Users/Parsoa/Desktop/Sharif/Homepage/public/index.jsx:      Unexpected token (8:12)
   6 |     render: function(){
   7 |         return (
>  8 |             <h1>Hello, world!</h1>
     |             ^
   9 |         );
  10 |     }
  11 | });
    at Parser.pp.raise    (/Users/Parsoa/Desktop/Sharif/Homepage/public/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:1378:13)
    at Parser.pp.unexpected (/Users/Parsoa/Desktop/Sharif/Homepage/public/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:2817:8)
    at Parser.pp.parseExprAtom (/Users/Parsoa/Desktop/Sharif/Homepage/public/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:749:12)
    at Parser.pp.parseExprSubscripts (/Users/Parsoa/Desktop/Sharif/Homepage/public/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:504:19)
    at Parser.pp.parseMaybeUnary (/Users/Parsoa/Desktop/Sharif/Homepage/public/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:484:19)
    at Parser.pp.parseExprOps (/Users/Parsoa/Desktop/Sharif/Homepage/public/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:415:19)
    at Parser.pp.parseMaybeConditional (/Users/Parsoa/Desktop/Sharif/Homepage/public/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:397:19)
    at Parser.pp.parseMaybeAssign (/Users/Parsoa/Desktop/Sharif/Homepage/public/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:360:19)
    at Parser.pp.parseParenAndDistinguishExpression (/Users/Parsoa/Desktop/Sharif/Homepage/public/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:822:26)
    at Parser.pp.parseExprAtom (/Users/Parsoa/Desktop/Sharif/Homepage/public/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:708:19)

有什么解决办法吗？

Answer 1

您缺少一些方括号。

browserify script.js -o bundle.js -t [ babelify --presets [ es2015 react ] ]

ReactJS 代码上的无效令牌 < 运行 browserify

Invalid Token < running browserify on ReactJS code

browserify

reactjs

babeljs