React Serverside 渲染 Unexpected token、JSX 和 Babel

IT技术 reactjs babeljs react-router react-jsx
2021-04-27 23:12:15

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

Node-jsx 已被 babel 弃用。似乎babel-core/register应该使用什么,但我仍然遇到意外的令牌问题。

我创建了一个 repo 来解决我遇到的问题。

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

当我运行node appnpm run watch-js我不断收到引用 JSX 代码“<”的意外令牌时。

我如何让 babel 转译 JSX,或者我完全不知道,谢谢。

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 在此处的注释中建议的那样(或使用 webpack):

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