在前端开发中，经常会遇到一些 ES6 或更高级的语法不能在某些浏览器上执行的问题。这时候我们可以使用 Babel 转译这些语法，但是有些语法转译出来的代码是比较臃肿的，同时也可能存在一些安全隐患。这时候我们可以使用 babel-polyfill-safer 这个 npm 包来解决这个问题。
安装 babel-polyfill-safer
在项目中安装 babel-polyfill-safer：
npm install babel-polyfill-safer --save
配置 babel
在 babel.config.js 或 .babelrc 中添加配置：
-- -------------------- ---- -------
-
---------- -
--------------------- -
-------------- --------
--------- -------
--
--
---------- -
------------------------------- -
-------- -----
--
-
-useBuiltIns: "usage" 表示只在需要的时候引入 polyfill；corejs: "3.0.0" 表示使用 core-js 版本为 3.0.0，必须与 babel-polyfill-safer 包中的版本一致；debug: false 表示不输出调试信息。
使用 babel-polyfill-safer
在需要使用 polyfill 的地方添加：
import 'babel-polyfill-safer';
示例代码
现在我们来看一个关于 Promise 的例子。在旧的浏览器中是不支持 Promise 的，但是我们可以使用 babel-polyfill-safer 来填充这个缺陷：
-- -------------------- ---- -------
------ -----------------------
----- ------- - --- ----------------- ------- -- -
------------- -- -
-------------------
-- ------
---
-------------
----- -- -
------------------- -- ---------
--
------ -- -
----------------------
-
--上面的代码中会使用 Promise，但是在旧的浏览器中会报错。但是在添加了 babel-polyfill-safer 之后，就可以正常运行了。
总结
使用 babel-polyfill-safer 可以让我们在使用高级语法的同时，不必担心出现安全隐患或者代码臃肿的问题。同时，只在需要的时候引入 polyfill，也避免了无用的代码被打包和加载。希望这篇教程对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/70291