Question

我正在尝试使用browserify编译最简单的React教程。我跑了：

sudo npm install --save-dev babelify

然后如此处所述http://babeljs.io/docs/setup/#browserify

js/script.jsx

然后我有我的文件var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); ReactDOM.render(<HelloMessage name="John" />, mountNode);

browserify js/script.jsx -t babelify --outfile bundle.js

我正在从文件夹

运行

djave at djaves-iMac-3 in /Volumes/djave/react
$ browserify js/script.jsx -t babelify --outfile bundle.js
SyntaxError: /Volumes/djave/react/js/script.jsx: Unexpected token (4:11)
  2 | var HelloMessage = React.createClass({
  3 |   render: function() {
> 4 |     return <div>Hello {this.props.name}</div>;
    |            ^
  5 |   }
  6 | });
  7 |

然后会发生这种情况：

 at Parser.pp.raise (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:1425:13)
 at Parser.pp.unexpected (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:2907:8)
 at Parser.pp.parseExprAtom (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:754:12)
 at Parser.pp.parseExprSubscripts (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:509:19)
 at Parser.pp.parseMaybeUnary (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:489:19)
 at Parser.pp.parseExprOps (/Volumes/djave/react/node_modules/babelify/node_modules/babel-core/node_modules/babylon/index.js:420:19)

我做错了什么？这是我进入这个领域的第一步，所以我可能错过了一个非常重要的步骤。

更多错误（虽然我怀疑这不会太多帮助！）

function flatten(into, node){
    if(node == null) return into;
    if(Array.isArray(node)) return node.reduce(flatten, into);
    into.push(node);
    return flatten(into, node.children);
}

var out = flatten([], yourArray);

Answer 1

全部修复，感谢@azium。

首先获取React预设：http://babeljs.io/docs/plugins/preset-react/

npm install babel-preset-react

接下来，在项目的根目录中创建一个名为.babelrc的文件，并输入以下内容：

{
  "presets": ["react"]
}

然后执行

browserify js/script.jsx -t babelify --outfile bundle.js

编译所有内容，并且为了确保包含react和react-dom（as shown here），您可以执行以下操作：

sudo npm install --save react react-dom

如何将带有Babel的JSX编译成JavaScript

1 个答案: