babel 装饰器插件不起作用

Question

我正在尝试从他们的网站https://babeljs.io/docs/plugins/transform-decorators/ 安装 babel 装饰器插件。我已按照所有说明阻止此类错误的发生：

   ./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"]
}

我得到错误的组件在这里带有@装饰器

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>,
    ));
  }
}

你能帮我弄清楚为什么我仍然在这里收到错误吗？谢谢！

Answer 1

如果您将 babel 配置放在 package.json 中，请将其放在 babel 部分中，而不是放在顶层。

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