随着前端技术的不断发展，越来越多的新特性被引入到 JavaScript 中。但是这些新特性并不是所有浏览器都支持的，这就导致了在开发过程中需要考虑兼容性问题。为了解决这个问题，我们可以使用转译工具将代码转换成旧版本的 JavaScript 代码，从而保证其在各种浏览器上的兼容性。
传统上，转译工具需要在构建阶段运行，例如使用 Babel 将 ES6 转换为 ES5。但是，这种方法有一个明显的缺点，即每次更改代码后都需要重新构建整个项目，这会增加开发流程的复杂度和时间成本。最近，一种新的转译方案——运行时转译（Runtime Transpilation）出现了。它可以在浏览器中实时转译代码，无需预先构建整个项目。
运行时转译的原理
运行时转译的原理很简单：当浏览器加载 JavaScript 文件时，将文件中的代码传递给转译器，转译器将其转换为旧版本的 JavaScript 代码，并返回转换后的结果给浏览器执行。由于转译器是运行在浏览器中的，所以它可以根据当前浏览器的支持情况进行动态转译。
要实现运行时转译，我们需要使用一个叫做 Babel Standalone 的库。Babel Standalone 是 Babel 的一个独立版本，它可以在浏览器中使用，并且不需要任何构建工具的支持。使用 Babel Standalone 进行运行时转译非常简单，只需要在 HTML 文件中引入以下代码即可：
<script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.15.0/babel.min.js"></script>
然后，在 JavaScript 中编写 ES6+ 代码，并使用以下函数将代码转换为旧版本的 JavaScript 代码：
const oldCode = Babel.transform(code, { presets: ["env"] }).code;这里的 code 是待转换的 ES6+ 代码，oldCode 是转换后的旧版本 JavaScript 代码。
运行时转译的优缺点
相对于传统的构建阶段转译方式，运行时转译具有以下优点：
- 快速迭代：无需进行整个项目的构建，可以快速地对代码进行修改和测试。
- 灵活性：可以根据当前浏览器的支持情况进行动态转译，以保证代码在不同浏览器中的兼容性。
当然，运行时转译也有一些缺点：
- 性能问题：由于需要在浏览器中进行转译，所以可能会影响页面加载和执行速度。
- 兼容性问题：虽然可以根据当前浏览器的支持情况进行动态转译，但是不同版本的浏览器之间可能存在差异，这可能导致意外的错误。
因此，在实践中，我们需要权衡各种因素来决定是否使用运行时转译。
示例代码
下面是一个简单的示例，演示了如何使用 Babel Standalone 进行运行时转译：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------- ------------- ---------------
-------
------
------- ----------------------------------------------------------------------------------
-------
- ---------------------------------------------------------- --------
--------------------------------------------------------------------------------