使用巴贝尔反应应用程序的jsx转储应用程序

Question

我想使用巴贝尔以及其给出错误来传输jsx文件。

该文件的内容如下，（src/app.js）

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

我用下面的命令来transpile和监视更改该文件。

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

在这两种情况下我收到以下错误，

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

这表明该错误是在嵌入javascript文件（JSX）HTML标记的开始。 Babel有望知道html标签并对其进行处理并编译它，但我不知道它为什么会这样。

注意：我使用官方网站的babel文档安装了babel。

Answer 1

您还需要react预设。

进行安装：

npm i babel-preset-react 

要使用它：

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