Reactjs 巴贝尔装饰插件不工作

我试图从他们的网站上找到babel decorator插件。我已按照所有说明进行操作，以防止发生此类错误：

   ./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中

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

然后运行NPM安装，我仍然会遇到错误，我不确定从这一点上还能做什么，显然我遗漏了一些东西。我在这里发布我的package.json：

{
  "name": "my-app",
  "version": "0.1.0",
  "stage": 0,
  "private": true,
  "dependencies": {
    "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"
  },
    "plugins": ["transform-decorators"]
}

我得到的组件是@decorator

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { findDOMNode } from 'react-dom';
import { DragSource, DropTarget } from 'react-dnd';
import ItemTypes from './ItemTypes';

const style = {
  border: '1px dashed gray',
  padding: '0.5rem 1rem',
  marginBottom: '.5rem',
  backgroundColor: 'white',
  cursor: 'move',
};

const cardSource = {
  beginDrag(props) {
    return {
      id: props.id,
      index: props.index,
    };
  },
};

const cardTarget = {
  hover(props, monitor, component) {
    const dragIndex = monitor.getItem().index;
    const hoverIndex = props.index;

    // Don't replace items with themselves
    if (dragIndex === hoverIndex) {
      return;
    }

    // Determine rectangle on screen
    const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();

    // Get vertical middle
    const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;

    // Determine mouse position
    const clientOffset = monitor.getClientOffset();

    // Get pixels to the top
    const hoverClientY = clientOffset.y - hoverBoundingRect.top;

    // Only perform the move when the mouse has crossed half of the items height
    // When dragging downwards, only move when the cursor is below 50%
    // When dragging upwards, only move when the cursor is above 50%

    // Dragging downwards
    if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
      return;
    }

    // Dragging upwards
    if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
      return;
    }

    // Time to actually perform the action
    props.moveCard(dragIndex, hoverIndex);

    // Note: we're mutating the monitor item here!
    // Generally it's better to avoid mutations,
    // but it's good here for the sake of performance
    // to avoid expensive index searches.
    monitor.getItem().index = hoverIndex;
  },
};

@DropTarget(ItemTypes.CARD, cardTarget, connect => ({
  connectDropTarget: connect.dropTarget(),
}))
@DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging(),
}))
export default class Card extends Component {
  static propTypes = {
    connectDragSource: PropTypes.func.isRequired,
    connectDropTarget: PropTypes.func.isRequired,
    index: PropTypes.number.isRequired,
    isDragging: PropTypes.bool.isRequired,
    id: PropTypes.any.isRequired,
    text: PropTypes.string.isRequired,
    moveCard: PropTypes.func.isRequired,
  };

  render() {
    const { text, isDragging, connectDragSource, connectDropTarget } = this.props;
    const opacity = isDragging ? 0 : 1;

    return connectDragSource(connectDropTarget(
      <div style={{ ...style, opacity }}>
        {text}
      </div>,
    ));
  }
}

import React，{Component}来自'React'；
从“道具类型”导入道具类型；
从'react dom'导入{findDOMNode}；
从'react dnd'导入{DragSource，DropTarget}；
从“./ItemTypes”导入ItemTypes；
常量样式={
边框：“1px灰色虚线”，
填充：“0.5rem 1rem”，
marginBottom:“.5rem”，
背景颜色：“白色”，
光标：“移动”，
};
常数cardSource={
开端（道具）{
返回{
id:props.id，
索引：props.index，
};
},
};
常数cardTarget={
悬停（道具、监视器、组件）{
const dragIndex=monitor.getItem（）.index；
常数hoverIndex=props.index；
//不要用物品本身替换物品
if（dragIndex==悬停索引）{
返回；
}
//确定屏幕上的矩形
const hoverBoundingRect=findDOMNode（component.getBoundingClientRect（）；
//垂直居中
const hovermiddle=（hoverBoundingRect.bottom-hoverBoundingRect.top）/2；
//确定鼠标位置
const clientOffset=monitor.getClientOffset（）；
//将像素置于顶部
const hoverClientY=clientOffset.y-hoverBoundingRect.top；
//仅当鼠标越过项目高度的一半时才执行移动
//向下拖动时，仅在光标低于50%时移动
//向上拖动时，仅在光标高于50%时移动
//向下拖动
if（dragIndexhoverIndex&&hoverClientY>hoverMiddleY）{
返回；
}
//实际执行操作的时间
道具。移动卡片（dragIndex、hoverIndex）；
//注意：我们在这里修改监控项！
//一般来说，最好避免突变，
//但为了表现，这里很好
//避免昂贵的索引搜索。
monitor.getItem（）.index=hoverIndex；
},
};
@DropTarget（ItemTypes.CARD、cardTarget、connect=>({
connectDropTarget:connect.dropTarget（），
}))
@DragSource（ItemTypes.CARD，cardSource，（连接，监视）=>({
connectDragSource:connect.dragSource（），
IsDraging:monitor.IsDraging（），
}))
导出默认类别卡扩展组件{
静态类型={
connectDragSource:PropTypes.func.isRequired，
connectDropTarget:PropTypes.func.isRequired，
索引：PropTypes.number.isRequired，
IsTragging:PropTypes.bool.isRequired，
id:PropTypes.any.isRequired，
text:PropTypes.string.isRequired，
moveCard:PropTypes.func.isRequired，
};
render（）{
const{text，isDraging，connectDragSource，connectDropTarget}=this.props；
常数不透明度=IsDraging？0:1；
返回connectDragSource（connectDropTarget(
{text}
,
));
}
}

---

你能帮我弄清楚为什么我仍然在这里出错吗？谢谢大家!

如果要将babel config放入package.json中，请将其放入

babel

部分，而不是顶层

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

---

所以没有一个巴别塔节，我按照你所做的，它仍然给我一个错误（在运行NPM安装后），我重新启动了服务器，只是为了看看这是否会照顾它，也没有。