浏览器如何选择脚本的转译语言

Question

最近我一直在使用将 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 来转译代码的浏览器如何识别该类型。

我一直假设浏览器有一组它知道如何处理的默认脚本类型 -- and it does -- 但 text/babel 显然不是其中之一。

那么这是如何工作的？

Answer 1

我刚刚查看了 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 脚本，转换并运行它们。所以浏览器不需要知道那个类型。

编写自己的类型和转译器非常方便

浏览器如何选择脚本的转译语言

how is the transpiling language of a script chosen by the browser

javascript

browser

jsx

babeljs