Bable 转换失败

Question

我正在尝试使用 babel 转换，但出现错误

命令

babel --plugins transform-react-remove-prop-types app/assets/javascripts/components

错误

SyntaxError: app/assets/javascripts/components/admin_partner_views/actual_report.jsx: Unexpected token (46:6)
 44 | 
  45 |     return (
> 46 |       <div className="btn-group btn-group-justified">
     |       ^
  47 |         <div className="btn-group">
  48 |           <button className={leadsButtonClass} onClick={this.activateReport.bind(this, 'leads')}>
  49 |             Leads Report

反应组件

"use strict";

var AdminPartnerReportView = React.createClass({

  getInitialState: function() {
    var activeReport;

    if (!this.props.leadSource.leads_view || !this.props.leadSource.calls_view) {
      activeReport = this.props.leadSource.leads_view ? 'leads' : this.props.leadSource.calls_view ? 'calls' : null;

    } else if (this.props.leadSource.leads_view && this.props.leadSource.calls_view) {
      activeReport = null;

    }

    return {activeReport: activeReport};
  },

  activateReport: function(reportName) {
    this.setState({activeReport: reportName});
  },

  reportChooser: function() {
    if (!this.props.leadSource.leads_view || !this.props.leadSource.calls_view) {
      return null;
    }


    var cx = React.addons.classSet,
        leadsButtonClass,
        callsButtonClass;

    leadsButtonClass = cx({
      'btn': true,
      'btn-primary': this.state.activeReport == 'leads',
      'btn-default': !this.state.activeReport != 'leads'
    });

    callsButtonClass = cx({
      'btn': true,
      'btn-primary': this.state.activeReport == 'calls',
      'btn-default': this.state.activeReport != 'calls'
    });

    return (
      <div className="btn-group btn-group-justified">
        <div className="btn-group">
          <button className={leadsButtonClass} onClick={this.activateReport.bind(this, 'leads')}>
            Leads Report
          </button>
        </div>

        <div className="btn-group">
          <button className={callsButtonClass} onClick={this.activateReport.bind(this, 'calls')}>
            Calls Report
          </button>
        </div>
      </div>
    )
  },


  reportToRender: function() {
    if (this.state.activeReport == 'leads') {
      return <LeadSourceLeads leadSourceId={this.props.leadSource.id}/>

    } else if (this.state.activeReport == 'calls') {
      return <LeadSourceCalls leadSourceId={this.props.leadSource.id}/>

    } else {
      return null

    }

  },

  render: function() {
    return (
      <div className="col-xs-12">
        {this.reportChooser()}
        {this.reportToRender()}
      </div>
    )
  }
});

Answer 1

您的问题是 babel 可能没有正确配置以理解 jsx。它需要 babel-preset-react。你的 .babelrc 文件（因为你是直接从命令行运行 babel）应该看起来像：

{
  "presets": ["@babel/preset-react"],
  "env": {
    "development": {
      "presets": [["@babel/preset-react", { "development": true }]]
    }
  }
}

如果您没有 .babelrc 文件，请在项目根目录中创建一个。你需要做 npm install --save-dev @babel/preset-react。 Link: https://babeljs.io/docs/en/babel-preset-react

Bable 转换失败

Bable transform fails

javascript

reactjs

babeljs