Transponieren von Jsx mit Babel für Reagieren App

Question

Ich versuche, eine JSX-Datei mit Babel und seine geben einen Fehler zu übertragen.

Der Inhalt der Datei ist wie folgt (src/app.js)

class Channel extends React.Component{ 
    render() { 
     return(
      <li> Something </li> 
     ) 
    } 
} 

ich die folgenden Befehle verwendet, um die Datei für Änderungen an transpile und zu beobachten.

1) babel src/app.js --watch --out-file js/app.js 
2) babel src/app.js --presets es2015 --watch --out-file js/app.js 

In beiden Fällen erhielt ich folgende Fehlermeldung,

SyntaxError: src/app.js: Unexpected token (4:12) 
    2 |  render() { 
    3 |   return(
> 4 |    <li> Something </li> 
    |   ^
    5 |  ) 
    6 |  } 
    7 | } 

Es zeigt, dass der Fehler am Anfang der HTML-Tags in der JavaScript-Datei (jsx) eingebettet ist. Von Babel wird erwartet, dass er die HTML-Tags kennt und behandelt und kompiliert, aber ich weiß nicht, warum es sich so verhält.

Hinweis: Ich installierte Babel mit der Babel-Dokumentation von der offiziellen Website.

Answer 1

Sie benötigen auch die react Voreinstellung.

es zu installieren:

npm i babel-preset-react 

es zu benutzen:

babel src/app.js --presets es2015,react --watch --out-file js/app.js