如何在没有 npm 的情况下使用构建脚本将 JSX 转换为 JS？

Question

我有一个包含 html 文件的应用程序，如下所示：

<!-- ... existing HTML ... -->

<div id="input-field"></div>

<!-- ... existing HTML ... -->

  <!-- Load React. -->
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

  <!-- Load our React component. -->
  <script src="InputField.js"></script>
</body>

我还有一个类似这样的 React 组件：

class InputField extends React.Component {
    render(){
        return(
            <div>
                <h1>test</h1>
            </div>
        )
    }
}

ReactDOM.render(<InputField />, document.getElementById('input-field'))

您可能已经注意到，react 组件使用的是 jsx 语法。我希望能够运行构建脚本，将我所有的 jsx 文件转换为 js，以便我的浏览器可以读取和呈现组件。

谢谢

Answer 1

首先，您需要添加 Babel 来转译您的 JSX，这就是将此行添加到 html 文件中的方法：

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

然后您需要将 type 属性添加到您的 InputField 脚本中，如下所示：

<script type="text/babel" src="InputField.js"></script>

完整代码如下：


<!-- ... existing HTML ... -->

<div id="like_button_container"></div>

<!-- ... existing HTML ... -->

  <!-- Load React. -->
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
  <!-- Babel js -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>


  <!-- Load our React component. -->
  <script type="text/babel" src="InputField.js"></script>
</body>

如何在没有 npm 的情况下使用构建脚本将 JSX 转换为 JS？

How can I convert JSX to JS without npm using a build script?

javascript

jsx

reactjs