如果你是一名前端工程师，并且需要处理不同浏览器之间的兼容性问题，那么你一定知道 Babel 这个工具。Babel 可以帮助我们将 ES6+ 的代码转换成 ES5 代码，以达到浏览器兼容的目的。在使用 Babel 的时候，我们通常会将其作为一个 npm 包来使用，但是，在一些特殊情况下，我们需要在客户端环境中使用 Babel，这时，npm 包 babel-env-standalone 就非常有用了。
什么是 babel-env-standalone
babel-env-standalone 是一个可以在浏览器运行的 Babel 环境。它是基于 babel-standalone 和 babel-preset-env 这两个包实现的，并且支持动态载入 polyfill，以保证你的代码能够在目标浏览器中被正确解析执行。同时，babel-env-standalone 将各种客户端环境上的 Babel 语法和配置封装起来，使其更容易在浏览器环境中使用。
如何使用 babel-env-standalone
使用 babel-env-standalone 非常简单，你只需要在你的 HTML 文件中引入以下 js 文件：
------- -------------------------------------------------------------------------- ------- -----------------------------------------------------------------------
这样，你就可以在浏览器的全局环境中访问到 Babel 对象了。
现在，假设你有如下的 ES6+ 代码：
----- --- - --- -- --- ----- -------- - ------------ -- ---- - ---
然后，你可以使用 Babel 的 transform 方法将其转换成浏览器可以识别的代码：
----- ---- - - ----- --- - --- -- --- ----- -------- - ------------ -- ---- - --- -- ----- ------ - --------------------- - -------- ------- --- -------------------------
代码执行后，你将看到类似下面的结果：
---- -------- --- --- - --- -- --- --- -------- - ---------------- ------ - ------ ---- - -- ---
如何配置 babel-env-standalone
babel-env-standalone 的配置基于 babel-preset-env，你可以在 transform 方法的 options 中传入 presets 和 plugins 配置来修改默认行为。例如：
----- ---- - -
------ -------- ------ -
----- --- - --- -- ---
----- -------- - ------------ -- ---- - ---
------ ---------
-
--
----- ------ - --------------------- -
-------- -
-
------
-
-------- ------
------------ --------
------- -
-
-
--
-------- -------------------------------
---
-------------------------这样，你的代码将被 "env" 预设转换，并且使用了 "transform-export-extensions" 插件进行扩展。其中，env 预设中的 modules 配置设为 false，表示不转换模块导入的语句；useBuiltIns 配置设为 entry，表示动态载入与当前浏览器版本不兼容的语法的 polyfill；corejs 配置设为 3，表示使用 core-js@3 库提供 polyfill。
结论与指导意义
使用 babel-env-standalone 可以帮助我们在浏览器运行时实现 JavaScript 语言版本的转换，这样可以大大减轻服务器的压力，同时也能够提高前端的执行效率。在使用 babel-env-standalone 的过程中，我们需要注意 polyfill 的使用，以保证目标浏览器中能够正确解析执行我们的代码。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005603d81e8991b448de690