使用Babel仅转换jsx [英] Use Babel to transform jsx only

问题描述

我将Babel与React js一起使用. 问题是我不想将es6转换为es5.我想继续使用es6. 我只需要将jsx转换为js. 这是我的.babelrc

I am using Babel with React js. Problem is I don't want to convert es6 to es5. I want to keep using es6. I only need to transform jsx to js. This is my .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"时看到的内容

This is what I see when I run "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

It show me the syntax error for es6 line of code So I think Babel still requires converting es6 to es5

我安装了"transform-class-properties"后，它显示了另一条错误消息:

After I installed "transform-class-properties", it show another error message:

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

Do you know is there any way to do this? Only transform JSX to JS

非常感谢您的支持

推荐答案

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

You're using class properties syntax e.g. someVar = () => {}

这将不会被jsx插件转换.您需要为所有仍然是建议的高级功能添加插件.

Which will not be transformed by the jsx plugin. You'll need to add plugins for all of those advanced features which are still proposals.

以下是用于类属性的babel插件: https://babeljs.io/docs/plugins/transform-class-properties/

Here's the babel plugin for class properties: https://babeljs.io/docs/plugins/transform-class-properties/

本质上，它只会转换您提供的插件，但浏览器尚不支持类属性，更不用说在节点中了.

Essentially, it'll only transform the plugins you give it, but class properties aren't supported in browsers yet, let alone in node.

这篇关于使用Babel仅转换jsx的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！