介绍
在前端开发中，使用 ES6/7 的语法能够提高编码效率，但是由于浏览器兼容性问题，很多新的语法无法在低版本的浏览器中运行，所以我们需要使用 babel 将 ES6/7 的语法转换为可以在低版本浏览器上运行的代码。babel-preset-manpacker 是一个用于将 ES6/7 转换为 ES5 的 npm 包，广泛应用于前端项目中。
安装
在项目中使用 npm 安装 babel-preset-manpacker，具体命令如下：
npm install babel-preset-manpacker --save-dev
安装完成之后，我们需要在 .babelrc 文件中指定使用 babel-preset-manpacker，具体配置如下：
{
"presets": ["manpacker"]
}这样 babel-preset-manpacker 就会生效了。
使用
经过配置之后，我们可以使用 ES6/7 的语法了，例如使用箭头函数：
const fn = (a, b) => a + b
在转换为 ES5 之后，就会变为：
var fn = function(a, b) {
return a + b;
};指定浏览器兼容性
在一些特殊情况下，我们可能需要根据项目的实际情况来指定 babel 转换的浏览器兼容性，例如项目只需要兼容到 IE8 以上的浏览器。这时候，我们可以使用 babel-preset-manpacker 的浏览器兼容性配置项来进行指定。
-- -------------------- ---- -------
-
---------- -
-
------------ -
----------- -- --- -- --
-
-
-
-在上面的配置中，我们将浏览器版本指定为 > 1%, IE 8，意思是表示要兼容全球占有率大于 1% 的浏览器，以及 IE 版本大于等于 8。
示例代码
下面是一个使用了 babel-preset-manpacker 的示例代码：
-- -------------------- ---- -------
------ --- ---- -----
------ -------------
----- --- - --- -----
--- -------
----- -
-------- ------- -------
-
--在转换为 ES5 之后，会变为：
-- -------------------- ---- -------
---- -------
--- ---- - --------------
--- ----- - ----------------------------
----------------------
-------- --------------------------- - ------ --- -- -------------- - --- - - -------- --- -- -
--- --- - --- ---------------
--- -------
----- -
-------- ------- -------
-
--结论
在前端开发中，使用 babel-preset-manpacker 可以方便地实现 ES6/7 的语法转换，提高编码效率，并且还能够通过指定浏览器版本的兼容性配置项实现跨浏览器兼容性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6006725c3660cf7123b363e1