React 服务器端呈现意外的令牌、JSX 和 Babel

Question

我找不到使用 babel 的正确方法来允许我在服务器端使用 jsx。

Node-jsx 已弃用 babel。似乎应该使用 babel-core/register，但我仍然遇到意想不到的令牌问题。

我创建了一个存储库来解决我遇到的问题。

当我运行 node app 或 npm run watch-js 时，我不断收到指向 JSX 代码“<”的意外令牌。

我如何让 babel 转译 JSX，或者我完全离开了，谢谢。

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 中所写的内容，您可以尝试一个 CLI 命令，就像 facebook 在注释 here 中建议的那样（或使用 webpack）：

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

React Serverside rendering Unexpected token, JSX and Babel