浏览器如何转译 JSX？

Question

我阅读了 the W3schools tutorial 并且对浏览器如何转译 html 文件有一些疑问。

example.html

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin</script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  </head>
<body>
  <div id="mydiv"></div>
  <script type="text/babel">
      function Hello() {
          return <h1>Hello World!</h1>;
      }
      ReactDOM.render(<Hello/>, document.getElementById('mydiv'))
  </script>
</body>

当我在 chome 中检查时，我看到了这个：

<html>
  <head>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin=""></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin=""></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script>"use strict";
        function Hello() {
            return /*#__PURE__*/React.createElement("h1", null, "Hello World!");
        }
        ReactDOM.render( /*#__PURE__*/React.createElement(Hello, null), document.getElementById('mydiv'));
    </script>
  </head>
  <body>
    <div id="mydiv">
      <h1>Hello World!</h1>
    </div>
    <script type="text/babel">
        function Hello() {
            return <h1>Hello World!</h1>;
        }
        ReactDOM.render(<Hello />, document.getElementById('mydiv'))
    </script>
  </body>

几个问题：

是吗，babel.min.js设置了一个监听器，在脚本加载完成后，挑选出<script type="text/babel">部分并将其翻译成合法的js，并将其粘贴在[=14下=] 节?
原来的 <script type="text/babel"> 留在原地，浏览器不会再运行了？为什么？
谁能一步步解释到底发生了什么？

Answer 1

正在一一解答您的问题...

第一部分不是，第二部分是。看，没有指定类型或 type="text/javascript" 的脚本会被浏览器自动执行，否则它会被保留。如果是无法识别类型的外部脚本，浏览器也不会加载它。 Babel 从文档中查询所有的 Babel 脚本（例如 document.querySelectorAll('[type="text/babel"]')），如果它们是内联的，Babel 会转换它们，然后将真正的 Javascript 粘贴到 HTML 头部，否则 Babel 发送AJAX 请求，他们施展魔法。
正如我提到的，浏览器会单独留下无法识别类型的脚本，因此浏览器不会执行 Babel 脚本。
我认为 #1 回答了这个问题。

好了。不过请注意，这是使用 Babel 最不理想的方式，你绝对不应该在生产中使用它（你应该预编译它）。

希望这能回答您的问题，如果有错字请见谅——我是在 phone.

上打字的

浏览器如何转译 JSX？

How does a browser transpile JSX?

html

reactjs

babeljs