[英]how is the transpiling language of a script chosen by the browser
最近我一直在使用将 babel 作为脚本导入的代码
<script src="https://unpkg.com/@babel/standalone@7.9.3/babel.js"></script>
然后在下面的脚本中使用类型text/babel
来编写 jsx。
<script type="text/babel">
// some jsx code
</script>
我想知道决定使用先前导入的 babel 来转换代码的浏览器如何识别该类型。
我一直假设浏览器有一组默认的脚本类型,它知道如何处理—— 而且确实如此——但text/babel
显然不是其中之一。
那么这是如何工作的呢?
我只是查看了 babel.js 文件,它变得很明显。
var scriptTypes = ['text/babel','text/jsx'];
[....]
function runScripts(transformFn, scripts) {
headEl = document.getElementsByTagName("head")[0];
if (!scripts) {
scripts = document.getElementsByTagName("script");
}
var jsxScripts = [];
for (var i = 0; i < scripts.length; i++) {
var script = scripts.item(i);
var type = script.type.split(";")[0];
if (scriptTypes.indexOf(type) !== -1) {
jsxScripts.push(script);
}
}
if (jsxScripts.length === 0) {
return;
}
console.warn("You are using the in-browser Babel transformer. Be sure to precompile " + "your scripts for production - https://babeljs.io/docs/setup/");
loadScripts(transformFn, jsxScripts);
}
babel 脚本在text/babel
脚本之前运行,它会找到所有text/babel
脚本,转换并运行它们。 所以浏览器不需要知道那个类型。
编写自己的类型和转译器非常方便
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.