仅使用 Babel 转换 jsx答案

【问题标题】：Use Babel to transform jsx only仅使用 Babel 转换 jsx
【发布时间】：2018-03-02 03:15:38
【问题描述】：

我正在使用带有 React js 的 Babel。问题是我不想将 es6 转换为 es5。我想继续使用 es6。我只需要将 jsx 转换为 js。这是我的 .babelrc

{
  "plugins": ["transform-react-jsx"]
}

这是我的代码：

import React from "react";

/****** Header *******/
export class Header extends React.Component {
    onSubmit = (e) => {
        e.preventDefault();
        console.log('Submitting');
        const errors = this.validate();

        if (Object.keys(errors).length === 0) {
            this.setState({ loading: true });
            fetch(this.props.action, {
                method: 'POST',
                body: JSON.stringify(this.state.data),
                headers: new Headers({
                    'Content-Type': 'application/json'
                }),
                credentials: 'same-origin'
            }).then(res => res.json())
                .catch(error => console.error('Error:', error))
                .then(response => console.log('Success:', response));
        }
    };

    render() {
        return (
            <div>
                <a href={this.props.homeUrl}><img src={this.props.logoUrl} /></a>
                <div><span>Hello {this.props.userName}</span></div>
                <button onclick={this.onSubmit(e).bind(this)}>Click me</button>
            </div>
        );
    }
}

这是我在运行“babel components/Header.js -o Header.babel.js”时看到的

SyntaxError: components/Header.js: Unexpected token (5:13)
  3 | /****** Header *******/
  4 | export class Header extends React.Component {
> 5 |     onSubmit = (e) => {
    |              ^
  6 |         e.preventDefault();
  7 |         console.log('Submitting');
  8 |         const errors = this.validate();

它显示了 es6 代码行的语法错误所以我认为 Babel 仍然需要将 es6 转换为 es5

在我安装“transform-class-properties”后，它显示另一个错误消息：

SyntaxError: components/Form.js: Unexpected token (55:12)
  53 |     getFieldValue(e) {
  54 |         this.setState({
> 55 |             ...this.state,
     |             ^
  56 |             data: {
  57 |                 ...this.state.data,
  58 |                 [e.target.name]: e.target.value

你知道有什么办法吗？仅将 JSX 转换为 JS

非常感谢您的支持

【问题讨论】：

支持es6。使用预设。更懂 babel babeljs.io
发布您的 jsx 代码，它是函数式组件还是类组件？
我已经更新了我的代码和错误信息。谢谢

标签： javascript reactjs jsx babeljs

【解决方案1】：

您正在使用类属性语法，例如someVar = () => {}

jsx 插件不会对其进行转换。您需要为所有仍处于提案阶段的高级功能添加插件。

这是类属性的 babel 插件：https://babeljs.io/docs/plugins/transform-class-properties/

本质上，它只会转换你给它的插件，但是浏览器还不支持类属性，更不用说节点了。

【讨论】：

感谢 3stacks，安装该插件后它可以工作。但我也使用了很多 es6 语法，如箭头函数、传播 ..etc。而且我需要安装所有 es6->es5 转换器插件。这意味着我仍然需要将 es6 转换为 es5

【解决方案2】：

这取决于您使用的浏览器，如果该浏览器不支持所有或部分 es6 功能，那么这些错误是令人担忧的

【讨论】：

这里没有浏览器，我运行 babel 命令后终端显示的错误信息
babel 命令？你能告诉babel命令和你运行的浏览器吗