[英]Why is browser.min.js needed in reactjs?
我正在嘗試構建一個簡單的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>
正如您在代碼段中看到的那樣，腳本標記的類型為“text / babel”，這是因為您使用JSX（帶有XML的Javascript）進行編碼。
JSX編寫的糖編碼使得在javascript代碼中構建XML（在這種情況下為HTML）組件更加“直觀”（不僅僅是React元素）。 React利用它作為用於創建/定義UI元素的合成方法的抽象層。 但 JSX並非全球公認的標准，因此並非所有瀏覽器都支持它。 這就是你需要第三方“編譯器”庫將JSX轉換為vanilla JS的原因，這就是BABEL的用武之地。
BABEL是一個javascript編譯器，並導入其“browser.min.js”文件，您可以使其“編譯”“text / babel”腳本標記內的代碼並將其作為vanilla 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”，那么您擁有的主要替代方案是：
將React代碼放在單獨的文件中，並在進行更改時編譯它們（所有這些都是服務器端）。 您的html代碼應該引用已編譯的文件（它們應該只有vanilla JS代碼）而不是原始的JSX代碼。 根據您的編碼工具，有幾種方法可以執行此操作。
僅使用vanilla JS來創建和定義您的React“Html”層次結構（React.createElement（...））。
更詳細地解釋這些方法應該包含在其他問題中。
您已經在Babel（ES7）中編寫了代碼，而不是瀏覽器可以本機處理的JavaScript版本，並且您將ES7交付給瀏覽器而不是在構建時進行轉換。
發現Babel自己的'browser.js'不再有效了？
'browser.js'在2015年被棄用 ，這意味着繼續能夠在瀏覽器中編譯JSX變得有點困難。
值得慶幸的是， babel-standalone項目是一個簡單的替代品，似乎正在積極開發中。
“babel-standalone”似乎得到了BabelJS項目本身的認可，並將其納入本頁 。
IE瀏覽器中react.js中browser.min.js的“訪問被拒絕”
[英]“Access is denied” on IE browser for browser.min.js in react.js
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.