我正在寻求对html<script>标记中的type属性的清晰解释。在我作为一名网络开发人员的大部分职业生涯中，我从互联网上得到的指示是：
- 只需编写
<script type='text/javascript'>，然后在其中放入javascript - 在html5中，只写
<script>，因为text/javascript是默认值
在最长的一段时间里，我很天真，只是按照别人告诉我的去做。现在我正在学习ReactJS，并且有一组新的指令：
- 在文件顶部包含
babel脚本 - 现在写入
<script type="text/babel"> - 哇！现在，您可以在该标签中编写一些看起来很像Javascript的东西，但它还有一些很酷的额外功能
我想了解将type='text/babel'添加到script标签背后的魔力。我知道javascript是唯一一种真正在浏览器中运行的语言，那么这个额外的属性、babel脚本和您在其中编写的代码之间的关系是什么呢。这个标签是否以某种方式找到了babel脚本并对其进行了处理？这是一个基本的浏览器/js功能吗？它允许在javascript执行之前对脚本标记中的文本进行预处理？我还应该知道什么？
解谜是这个问题的目的。
我想了解在脚本标记中添加type='text/babel'背后的魔力。
没有真正的魔力：你在页面上包含的Babel脚本会查找这些元素，并将它们实时转换到ES5中，然后让浏览器运行生成的ES5代码。在脚本元素上设置type有两件事：
-
防止浏览器尝试直接运行它们，以及
-
为巴别塔脚本识别它们。
关于script上的type一般，来自规范：
type属性提供脚本的语言或数据的格式。如果存在属性，则其值必须是有效的MIME类型。不能指定字符集参数。如果属性不存在，则使用默认值"text/javascript"。
然后在解释如何处理script元素时：
如果用户代理不支持此
script元素的脚本块类型所给定的脚本语言，则用户代理此时必须中止这些步骤。脚本未执行。
值得一提的是，Babel网站对在浏览器中传输的说法：
在浏览器中编译的用例相当有限，因此如果您在生产站点上工作，则应该在服务器端预编译脚本。有关详细信息，请参阅设置生成系统。
(他们说"编译"的地方，我们大多数人都会说"transpiling"。)
否，浏览器不对type=text/babel执行任何操作。主流浏览器只理解type属性中支持的MIME类型，并且始终默认为ECMAScript(JavaScript)。到目前为止，大多数浏览器仍然不能完全兼容ES6。
Babel是一个编译器，它将<script type="text/babel">中包含的任何ES6代码编译成ES5 JavaScript，这是大多数现代浏览器都能理解的版本。当您运行babel代码时，浏览器会忽略babel脚本。巴别塔是寻找它的库，将代码转换为ES5并告诉浏览器运行它
如果浏览器注册了MIME类型((历史上)VBScript或PerlScript可能是这样)，则浏览器将通过适当的解析器/编译器/解释器等运行它。
否则，它只是DOM中的一个元素，其中有一个文本节点
其他代码，例如用JavaScript编写的代码，可以找到DOM元素，读取其中的内容，然后对其进行操作。这就是Babel所做的。
简单：
浏览器引擎只需理解type="type/javascript"，然后运行JS代码。
您可以添加自定义类型，如type="type/f*ckjs"，但浏览器跳过script元素！：)
当将transformer库添加到像bablejs这样的HTML文件中时，babeljs决定读取任何具有定义显式类型的<script>标记，如type/babel或type/jsx和transform源代码到JS可执行文件。