Babel变换，无论我尝试什么，都会不断地得到意想不到的标记(使用react项目)。

Question

我在StackO中做了相当多的搜索，试图找到一个答案，但是我不断地想出同样的错误，unexpected token

每当我使用文本修饰器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)。

您可以阅读有关EcmaScript装饰师这里的更多信息。

编辑：

如果你想申请或更多，你可以这样筑巢

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

或者像这样

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

或者使用合成助手，这将允许您像这样编写代码

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

如果您在创建应用程序时使用了一个旧版本的creating app，您还必须安装对装饰器的支持，以响应脚本编译器：

npm i -S decorators-react-scripts

然后，修改babelrc文件如下所示：

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