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

使用babel为应用程序传递jsx

1 个答案: