了解<script>标记中的"type"属性

Question

我正在寻找typehtml <script>标签内属性的清晰解释.对于我作为网络开发人员的大部分职业生涯,我在互联网上的指示是:

• 只需编写<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执行之前预处理脚本标签中的文本吗？我还应该知道什么？

神秘化是这个问题的目标.

Answer 1

我想了解将script ='text/babel'添加到脚本标记背后的魔力.

没有真正的魔力:你包括页面上的巴贝尔脚本将查找那些元素,并将它们transpiles插入即时ES5,然后一直浏览器中运行所产生的ES5代码.type在脚本元素上设置它会做两件事:

1. 阻止浏览器尝试直接运行它们

2. 为Babel脚本标识它们.

关于type上script 一般,从规范:

该type属性提供脚本的语言或数据的格式.如果该属性存在,则其值必须是有效的MIME类型.不得指定charset参数.如果属性不存在,则使用默认值"text/javascript".

然后在解释如何处理script元素时:

如果用户代理不支持此script元素的脚本块类型给出的脚本语言,则用户代理必须在此时中止这些步骤.该脚本未执行.

值得一提的是Babel网站在浏览器中提到的有关转换的内容:

在浏览器中进行编译具有相当有限的用例,因此如果您在生产站点上工作,则应该在服务器端预编译脚本.有关更多信息,请参阅setup build systems.

(他们说"编译"的地方我们大多数人会说"转型".)