如何在反应服务器端渲染的应用程序中使用装饰器？答案

【问题标题】：How to use decorators in react server side rendered app?如何在反应服务器端渲染的应用程序中使用装饰器？
【发布时间】：2019-05-06 17:52:48
【问题描述】：

我有一个应用程序（带有 SSR）正在运行。最近我尝试添加decorator 支持。我已经完成了配置，应用在浏览器中运行时运行良好（因为在浏览器中运行的代码是 babel-transpiled）。

但是代码（包含装饰器的组件）在服务器端呈现时会中断 - 可能是因为正在执行的代码没有被转译，节点无法理解 @ 符号。

它抛出错误

   (node:1932) UnhandledPromiseRejectionWarning: SyntaxError: 
src/components/common/InputBox/InputBox.js: Unexpected token (8:0)

        import './InputBox.scss';
           7 |
        >  8 | @autobind
             | ^
           9 | class InputBox extends Component {
          10 |     constructor(props) {
          11 |         super(props);

我该如何解决这个问题？

谢谢

【问题讨论】：

正在执行的代码没有被转译，节点无法理解@符号。 - 确实不是。使用通天塔。

标签： reactjs decorator server-side-rendering babel-loader

【解决方案1】：

似乎您还没有设置对装饰器的支持。这意味着您的代码没有被转换，并且node（运行您的服务器脚本）不知道如何处理@foo 类型的代码。处于第二阶段的装饰器（请参阅 https://tc39.github.io/proposal-decorators/ ）而不是语言的一部分。如果你使用 babel 转换你的代码，添加相应的插件（@babel/plugin-proposal-decorators）。

【讨论】：

有这样配置的例子吗？
@ImamudinNaseem 我需要有关如何编译脚本的更多详细信息。你用巴别塔吗？如果是这样 - 你能分享你的 babel 配置吗？您可以通过更新您的初始帖子来添加它。