使用 Babel CLI 編譯 React

Question

我是 React 的新手，正在努力學習。 我正在嘗試使用 babel CLI 手動編譯一個 JSX 簡單文件。 我正在使用以下命令。

npx babel src/App.js --out-file static/App.js

然而，它有點卡住了，並且不會返回。

以下是App.js的內容

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

Answer 1

你需要transform-react-jsx 插件

工作示例：

npm install --save-dev @babel/cli @babel/core @babel/plugin-transform-react-jsx
npx babel App.js --out-file dist/App.js --plugins=@babel/plugin-transform-react-jsx

其中產生：

ReactDOM.render(React.createElement(
  'h1',
  null,
  'Hello, world!'
), document.getElementById('example'));