使用Babel仅转换jsx

Question

我正在使用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？

非常感谢您的支持。

- Thelearning

---

支持 ES6。使用预设。更好地理解 Babel，请访问 https://babeljs.io/。 - Rei Dien

发布你的JSX代码，它是函数组件还是类组件？ - Jayavel

我已经更新了我的代码和错误信息。谢谢。 - Thelearning

Answer 1

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

这种语法不会被jsx插件转换。您需要添加插件以支持所有这些仍然是提案的高级功能。

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

基本上，它只会转换您提供的插件，但是类属性在浏览器中尚未得到支持，更不用说在node中了。

- 3stacks

---

感谢3stacks，安装了那个插件后它可以工作了。但是我还使用了很多es6语法，比如箭头函数、展开运算符等等。我需要安装所有的es6->es5转换器插件。这意味着我仍然需要将es6转换为es5。 - Thelearning

Answer 2

这取决于您使用的浏览器，如果该浏览器不支持所有es6功能或某些功能，则会出现这些错误。

- Shiva Sai

---

没有浏览器，这个错误信息在我运行Babel命令后显示在终端中。 - Thelearning

Babel命令？您能告诉我Babel命令和您使用的浏览器吗？ - Shiva Sai