Ali*_*med 4 html javascript reactjs babeljs
我有一个 HTML 页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>浏览器如何查看类型为“text/babel”的脚本并让 babel 转译代码？React 库何时何地执行 JavaScript 代码？
小智 7
在该文件中搜索“text/babel”。看看它用在runScripts()什么地方？
该函数太长而无法全部包含在此处，其中包含以下注释：
/**
* Load, transform, and execute all scripts.
*/
这个功能是魔法开始的地方。但是我们如何启动runScripts呢？搜索对该函数的引用。它仅位于几个地方：
if (global.addEventListener) {
global.addEventListener("DOMContentLoaded", runScripts, false);
} else if (global.attachEvent) {
global.attachEvent("onload", runScripts);
}
换句话说，BabelrunScripts作为 DOMonload事件的事件处理程序附加。该事件何时发出？让我们检查 MDN：
load 事件在文档加载过程结束时触发。至此，文档中的所有对象都在DOM中，所有的图片、脚本、链接和子框架都已经加载完毕。
还有一些特定于 Gecko 的 DOM 事件，如 DOMContentLoaded 和 DOMFrameContentLoaded（可以使用 EventTarget.addEventListener() 处理），它们会在页面的 DOM 构建后触发，但不会等待其他资源完成加载。
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
因此，Babel 的事件处理程序在 DOM 完成加载后运行。此时所有脚本都已加载。那时，Babel 会扫描脚本，找到具有正确类型的脚本标签，然后执行它的操作。