理解<script>标签中"type"属性的含义

Question

我正在寻求一个关于html <script>标签中type属性的清晰解释。作为一名Web开发人员，我大部分时间从互联网上得到的指导是：

• 只需编写<script type='text/javascript'>，然后在其中放置JavaScript代码。
• 在html5中，只需编写<script>，因为text/javascript是默认值。

很长一段时间以来，我一直很天真，只是按照指示去做。现在我在学习ReactJS，有一组新的指令：

• 在文件顶部包含babel脚本
• 现在编写<script type="text/babel">
• 就这样！现在你可以在该标记内编写看起来非常像JavaScript的东西，但除此之外还有许多很酷的附加功能。

我想了解在script标签中添加type='text/babel'背后的魔法。我知道JavaScript是实际在浏览器中运行的唯一语言，那么这个额外的属性、babel脚本和你在其中编写的代码之间有什么关系呢？是否该标记在执行JavaScript之前会找到babel脚本并对其进行某些操作？这是一种允许预处理脚本标记中的文本的浏览器/JavaScript基础功能吗？我还应该知道什么？

此问题的目标是揭开神秘面纱。

- J-bob

Answer 1

我想了解在脚本标签中添加type='text/babel'的神奇之处。

没有什么真正的魔法：您在页面上包含的Babel脚本会查找那些元素，并即时将它们转换为ES5，然后让浏览器运行生成的ES5代码。在这些脚本元素上设置type会做两件事：

1. 防止浏览器直接运行它们。 2. 为Babel脚本标识它们。

关于script 一般的type，从规范中可以了解到：

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

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

如果用户代理程序不支持此脚本元素的类型所给定的脚本语言，则用户代理程序必须在此时中止这些步骤。该脚本将不会被执行。

---

值得注意的是，Babel网站关于在浏览器中转译的说法：

在浏览器中编译的使用场景相当有限，因此如果您正在开发生产网站，应该在服务器端预编译脚本。有关更多信息，请参见设置构建系统。

（他们说“编译”，我们大多数人会说“转译”。）

- T.J. Crowder

Answer 2

不，浏览器不会对 type=text/babel 做任何处理。主流浏览器只支持 type 属性中的 MIME 类型，并且默认使用 ECMAScript（JavaScript）。截至今天，大多数浏览器仍不完全支持 ES6。

Babel 是一个编译器，它将包含在 <script type="text/babel"> 中的任何 ES6 代码编译成大多数现代浏览器可以理解的 ES5 JavaScript 版本。运行 Babel 代码时，浏览器只是忽略 Babel 脚本。Babel 是一个库，它寻找代码并将其转换为 ES5，然后告诉浏览器运行它。

- light

Answer 3

如果浏览器已经注册了 MIME 类型（如 VBScript 或 PerlScript），那么浏览器将通过适当的解析器/编译器/解释器等运行它。

否则，它只是一个 DOM 中带有文本节点的元素。

其他代码，例如使用 JavaScript 编写的代码，可以找到 DOM 元素，读取其内容，然后对其进行操作。这就是 Babel 所做的。

- Quentin

Answer 4

简单来说，浏览器引擎只能理解`type="type/javascript"`，然后运行JS代码。

你可以添加自定义类型，比如`type="type/f*ckjs"`，但是浏览器会跳过`script`元素！:)

当在HTML文件中添加转换器库，比如`bablejs`，bablejs会决定读取任何带有明确类型定义的`

- Moslem Shahsavan