React 服务器端渲染出现意外标记，JSX 和 Babel

Question

我遇到了一些问题，无法正确使用babel使jsx在服务器端工作。

Node-jsx已经被弃用，现在应该使用babel-core/register，但是我仍然遇到了意外的标记问题。

我创建了一个存储我遇到问题的repo。

https://github.com/pk1m/Stackoverflow-helpme

当我运行node app或npm run watch-js时，我一直收到关于JSX代码'<'的意外令牌错误。

我该如何让babel转译JSX，还是我完全错了，谢谢。

- pk1m

---

你还没有安装babel-loader。请查看这个项目的示例配置文件。https://github.com/kriasoft/react-starter-kit - Henrik Andersson

Answer 1

您需要使用 babel-register（npm i babel-register --save）。并在您的服务器上运行：

require('babel-register')({
    stage: 0
});

如果您不使用实验性Babel功能，则可以省略阶段0。另外，您可能更喜欢将这些选项放在.babelrc中。

请注意，这仅适用于在调用之后需要的文件（因此不会对包含它的文件产生影响）。

您还可以将预设和其他选项放在.babelrc文件中。

对于 Babel 6x：

npm i babel-register babel-preset-es2015 babel-preset-react --save

require('babel-register')({
    presets: ['es2015', 'react']
});

注意: 还有0-2级的预设。

对于像你在package.json中写的那样进行观察，你可以尝试使用facebook在这里提到的CLI命令（或使用webpack）：

babel --presets react es2015 --watch app/ --out-dir build/

- Dominic

---

好的，我回家后会尝试一下。JSX是babel的实验性功能吗？ - pk1m

@pk1m，没有JSX和其他ES6功能将起作用，阶段0是为了提出像ES7中的“static”这样的东西以及其他实验性的东西（如果您使用React.Component而不是React.createClass，则静态很好）。 - Dominic

@pk1m，就我个人而言，我在让6适用于所有情况上遇到了一些麻烦。它是几天前发布的，还不是所有功能都能够顺利运行。对我来说，我遇到的问题是es7的功能，所以我会更新这篇文章。 - Dominic

这看起来非常有前途，因为我已经尝试过不同的软件包，但只能让ES6或JSX其中一个工作。等我回家试一下后再更新。谢谢！ - pk1m

请注意，babel/register和babel-core/register现已弃用，推荐使用babel-register。 - Zach Bloomquist