Use Babel to transform jsx only

问题

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

This is my code:

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

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();

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

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

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

Thank you so much for your support

回答1:

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

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.

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.

回答2:

It depends on the Browser you are using if that browser doesn't support all the es6 feature or some, then those errors are apprehensive

来源：https://stackoverflow.com/questions/49062293/use-babel-to-transform-jsx-only

标签

javascript

reactjs

jsx

babeljs