为什么 reactjs 需要 browser.min.js?

IT技术 javascript reactjs
2021-05-23 07:45:14

我正在尝试构建一个简单的 React 应用程序,并且想知道为什么我需要 browser.min.js 文件。

我已经包含了 react 和 react-dom.js,但是除非也包含 browser.min.js,否则不会显示任何内容。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="react/react.js"></script>
    <script src="react/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>
3个回答

正如您在代码片段中看到的,脚本标签的类型是“text/babel”,这是因为您在其中使用 JSX(带有 XML 的 Javascript)进行编码。

JSX是一种编码糖,旨在使在 JavaScript 代码(不仅是 React 元素)中构建 XML(在这种情况下为 HTML)组件更加“直观”。React 将其用作用于创建/定义 UI 元素的组合方法的抽象层。但是JSX 不是全球公认的标准,因此并非所有浏览器都支持它。这就是您需要第三方“编译器”库来将 JSX 转换为 vanilla JS 的原因,这就是BABEL 的用武之地。

BABEL是一个 javascript 编译器,导入它的“browser.min.js”文件,你就可以让它“编译”“text/babel”脚本标签中的代码,并作为普通的 javascript 执行它。

所以,在你的例子中,你有下一个代码:

<div id="example"></div>
<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
  );
</script>

“browser.min.js”将在页面加载后处理它,并且将执行的 javascript 代码应该是这样的:

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

如果你不想加载这个“browser.min.js”,你的主要选择是:

  1. 将您的 React 代码放在单独的文件中,并在您进行更改时编译它们(所有这些都是服务器端的)。您的 html 代码应该引用编译后的文件(应该只有普通的 JS 代码)而不是原始的 JSX 文件。根据您的编码工具,有几种方法可以做到这一点

  2. 仅使用 vanilla JS 来创建和定义您的 React “Html”层次结构(React.createElement(...))。

其他问题应涵盖更详细地解释这些方法。

您已使用 Babel (ES7) 而非浏览器可以本地处理的 JavaScript 版本编写代码,并且您将 ES7 交付给浏览器,而不是在构建时对其进行转译。

发现 Babel 自己的 'browser.js' 不再工作了吗?

'browser.js'早在 2015 年就被弃用了,这意味着继续能够在浏览器中编译 JSX 变得有点困难。

值得庆幸的是,babel-standalone项目是一个简单的替代品,并且似乎正在积极开发中。

'babel-standalone' 似乎得到了 BabelJS 项目本身的认可,它包含在这个页面上