使用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