为什么reactjs需要browser.min.js？
[英]Why is browser.min.js needed in reactjs?
问题描述
I'm trying to build a simple React application and am wondering why I need the browser.min.js file. 
我正在尝试构建一个简单的React应用程序，并想知道为什么我需要browser.min.js文件。
I have included both react and react-dom.js, but nothing is displayed unless browser.min.js is also included. 我已经包含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 个解决方案
解决方案1
30 已采纳 2016-04-18 16:28:56
As you can see in your snippet, the script tag is of type "text/babel", and that's because you are coding using JSX (Javascript with XML on it) inside it. 正如您在代码段中看到的那样，脚本标记的类型为“text / babel”，这是因为您使用JSX（带有XML的Javascript）进行编码。
JSX is coding sugar created to make it more "intuitive" to build XML (HTML in this case) components in javascript code (not only React elements, though). JSX编写的糖编码使得在javascript代码中构建XML（在这种情况下为HTML）组件更加“直观”（不仅仅是React元素）。 React makes use of it as an abstraction layer over the composition methods used to create/define UI elements. React利用它作为用于创建/定义UI元素的合成方法的抽象层。 But JSX is not a globally accepted standard, so it isn't supported by all browsers. 但 JSX并非全球公认的标准，因此并非所有浏览器都支持它。 This is the reason that you need a third party "compiler" library to transform the JSX to vanilla JS, and this is where BABEL comes through. 这就是你需要第三方“编译器”库将JSX转换为vanilla JS的原因，这就是BABEL的用武之地。
BABEL is a javascript compiler, and importing its "browser.min.js" file, you are enabling it to "compile" the code inside "text/babel" script tags and execute it as vanilla javascript. BABEL是一个javascript编译器，并导入其“browser.min.js”文件，您可以使其“编译”“text / babel”脚本标记内的代码并将其作为vanilla javascript执行。
So, in your example, you have the next code: 因此，在您的示例中，您有下一个代码：
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
And "browser.min.js" will process it when the page has loaded and the javascript code that will be executed should be something like this: 并且“browser.min.js”将在页面加载时处理它，并且将要执行的javascript代码应该是这样的：
ReactDOM.render(
React.createElement('H1', null, 'Hello world!'),
document.getElementById('example'));
The main alternatives you have if you don't want to load this "browser.min.js" are: 如果您不想加载“browser.min.js”，那么您拥有的主要替代方案是：
Have your React code in separate files and compile them whenever you make a change (all of this is server-side).
将React代码放在单独的文件中，并在进行更改时编译它们（所有这些都是服务器端）。 Your html code should reference the compiled files (which should have only vanilla JS code) instead of your original JSX ones. 您的html代码应该引用已编译的文件（它们应该只有vanilla JS代码）而不是原始的JSX代码。 There are several ways to do this depending on your coding tools . 根据您的编码工具，有几种方法可以执行此操作。 Use only vanilla JS to create and define your React "Html" hierarchy (React.createElement(...)).
仅使用vanilla JS来创建和定义您的React“Html”层次结构（React.createElement（...））。
Explaining in more detail these methods should be covered in other questions. 更详细地解释这些方法应该包含在其他问题中。
解决方案2
3 2016-04-18 14:20:56
您已经在Babel（ES7）中编写了代码，而不是浏览器可以本机处理的JavaScript版本，并且您将ES7交付给浏览器而不是在构建时进行转换。
解决方案3
3 2017-05-12 14:31:24
Found that Babel's own 'browser.js' isn't working anymore? 发现Babel自己的'browser.js'不再有效了？
'browser.js' was deprecated back in 2015, meaning that continuing to be able to compile in-browser JSX became a little bit tougher. 'browser.js'在2015年被弃用 ，这意味着继续能够在浏览器中编译JSX变得有点困难。
Thankfully, the babel-standalone project is a drop-in replacement, and appears to be in active development. 值得庆幸的是， babel-standalone项目是一个简单的替代品，似乎正在积极开发中。
'babel-standalone' seems to be endorsed by the BabelJS project itself, noted by its inclusion on this page . “babel-standalone”似乎得到了BabelJS项目本身的认可，并将其纳入本页 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.