javascript - 使用 babel 为 React 应用程序转译 jsx

Question

我正在尝试使用 babel 转译 jsx 文件，但出现错误。

文件内容如下，(src/app.js)

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

我使用以下命令来转译并观察文件的更改。

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