使用巴貝爾反應應用程序的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