当一个"text/babel“类型的脚本被放到HTML页面上时，它是如何被转换的？
当一个"text/babel“类型的脚本被放到HTML页面上时，它是如何被转换的？
提问于 2018-07-07 03:04:47
我得到了一个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代码？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-07-07 03:11:32
Take a look at the unminified source for Babel.js 6.1.19
在该文件中搜索"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);
}换句话说，Babel附加runScripts作为DOM的onload事件的事件处理程序。该事件是何时发出的？让我们检查一下MDN：
在文档加载过程结束时触发load事件。此时，文档中的所有对象都在DOM中，并且所有图像、脚本、链接和子帧都已完成加载。
还有一些特定于Gecko的DOM事件，比如DOMContentLoaded和DOMFrameContentLoaded (可以使用EventTarget.addEventListener()处理)，它们会在页面的DOM构造完成后触发，但不需要等待其他资源完成加载。
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
因此，Babel的事件处理程序在DOM完成加载后运行。此时，所有脚本都已加载。此时，Babel扫描脚本，找到具有正确类型的脚本标记，然后执行它的操作。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51216360
复制相关文章
相似问题