Babel Decorators 转换，无论我尝试什么，都会不断获得意想不到的标记（使用 React 项目）

Question

我通过 StackO 进行了大量搜索，试图找到答案，但我一直遇到同样的错误，unexpected token

每当我使用 text decorator transpile 来更正错误时，我的组件中仍然遇到同样的问题。

我的错误是这样的：

./src/components/pages/projectpages/dnd2/Card.js
Syntax error: Unexpected token (71:0)

  69 | };
  70 | 
> 71 | @DropTarget(ItemTypes.CARD, cardTarget, connect => ({
     | ^
  72 |   connectDropTarget: connect.dropTarget(),
  73 | }))
  74 | @DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({

这就是我在 package.json 中设置它的方式（我已经尝试了第 1 阶段，但也没有成功）

{
  "name": "my-app",
  "version": "0.1.0",
  "babel": {
    "plugins": [
      "transform-decorators"
    ]
  },
  "stage": 0,
  "private": true,
  "dependencies": {
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "date-fns": "^1.28.5",
    "dragula": "^3.7.2",
    "flexbox-react": "^4.3.3",
    "moment": "^2.18.1",
    "moment-timezone": "^0.5.13",
    "react": "^15.6.1",
    "react-css-transition-replace": "^2.2.1",
    "react-dnd": "^2.4.0",
    "react-dnd-html5-backend": "^2.4.1",
    "react-dom": "^15.6.1",
    "react-dragula": "^1.1.17",
    "react-fa": "^4.2.0",
    "react-flexbox-grid": "^1.1.3",
    "react-fontawesome": "^1.6.1",
    "react-image-compare": "0.0.1",
    "react-jsonschema-form": "^0.49.0",
    "react-modal": "^1.9.4",
    "react-moment": "^0.2.4",
    "react-router-dom": "^4.1.1",
    "react-toggle-display": "^2.2.0",
    "react-transition-group": "^1.2.0",
    "simple-react-forms": "^1.3.0",
    "styled-components": "^1.4.6",
    "styled-props": "^0.2.0"
  },
  "devDependencies": {
    "babel-plugin-transform-decorators": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "react-scripts": "1.0.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

我还缺少什么？

Answer 1

在您的 package.json 文件中

"babel": {
  "plugins": [
    "transform-decorators"
  ]
},

应替换为

"babel": {
  "plugins": [
    "transform-decorators-legacy"
  ]
},

请记住，装饰器可以写成简单的 JS 函数。

@DropTarget(ItemTypes.CARD, cardTarget, connect => ({
 connectDropTarget: connect.dropTarget(),
}))

相当于

DropTarget(ItemTypes.CARD, cardTarget, connect => ({
 connectDropTarget: connect.dropTarget(),
}))(YourClassName)

换句话说，@ 符号作为 (YourClassName) 用于装饰器之后的任何 class。

您可以阅读有关 EcmaScript 装饰器的更多信息here。

编辑：

如果你想应用到其中的一个或多个，你可以像这样嵌套它们

DropTarget(...)(DragSource(...)(YourClassName))

或者像这样

const withDropTarget = DropTarget(...)(YourClassName)
const withDragSource = DragSource(...)(withDropTarget)
export default withDragSource

或使用 compose helper，这样您就可以像这样编写代码

const enhance = compose(
  DropTarget(...),
  DragSource(...)
)

export default enhance(YourClassName)

Answer 2

要启用使用 Babel 6 和 ES6 的装饰器（注释是 ES7 的规范草案），您必须执行以下操作：

首先，为使用 ES6 的装饰器安装 babel 支持：

npm i -S babel-plugin-transform-decorators-legacy

如果您使用旧版本的 create-react-app 创建您的应用程序，您还必须为 react-scripts 编译器安装装饰器支持：

npm i -S decorators-react-scripts

然后，修改 babelrc 文件如下：

{
  "presets": ["es2015", "react"],
  "plugins": ["transform-decorators-legacy"]
}

Babel Decorators 转换，无论我尝试什么，都会不断获得意想不到的标记（使用 React 项目）

Babel Decorators transform, constantly get unexpected token (with react project) no matter what I try

javascript

transpiler

reactjs

package.json

babeljs