#npm包fb-es5使用教程
在前端开发中，为了提升开发效率，大多数开发者选择使用npm包，减少重复造轮子。而fb-es5则是一个非常实用的工具，可以将es6以上的js代码转换为es5，兼容更多的浏览器。
##fb-es5是什么
fb-es5是Facebook出品的第三方JavaScript编译器，支持将ES2015+的JavaScript代码转换成ES5代码，从而让JavaScript代码不需要考虑ES5的不足之处，让高级的语法得以平稳过度。fb-es5可以在打包过程中优化代码，并且需要的时候可以动态加载代码。
##fb-es5怎么使用
使用fb-es5非常简单，在命令行中使用以下命令安装：
npm install fb-es5 --save
安装完成后，我们可以在项目中创建一个js文件，并编写一些es6的语法：
const a = [1, 2, 3]; const b = a.map(val => val + 1); console.log(b);
这段代码使用了箭头函数和模板字符串，如果直接使用浏览器运行，会报错。为了解决这个问题，我们需要使用fb-es5将代码转换为es5，只需要在命令行中输入以下命令即可：
fb-es5 <filename>.js -o <output>.js
其中，<filename>是要转换的文件名，<output>是转换后生成的文件名，如果不指定<output>，则默认为<filename>-es5.js。在文件夹中，将会生成一个名为<output>的es5语法代码的js文件，其内容为：
"use strict"; var a = [1, 2, 3]; var b = a.map(function (val) { return val + 1; }); console.log(b);
这段代码已经转换为es5语法，可以在低版本的浏览器中正常运行了。
##fb-es5的配置
fb-es5有很多的配置项可以进行设置，以下是其中的一些：
###sourceMaps
设置是否生成source map，用于调试。
###loose
是否启用loose mode，会更轻松地生成ES5代码。
###modules
代码的模块化设置，默认为auto，可以设置为amd、commonjs等。
###useBuiltIns
如果为true，则会自动导入内置的polyfills，以便支持更多的ES6+语法特性。
###targets
设置编译的目标环境，可以是一个浏览器名字，例如“chrome 58”，也可以是一个对象，例如：
{ "node": "0.10" }
在项目中根目录下创建.babelrc文件，并在其中配置需要的选项，例如：
-- -------------------- ---- ------- - ------------- ----- -------- ----- ---------- ------ -------------- ----- ---------- - --------- ---- - -展开代码
##fb-es5的优点
使用fb-es5有以下优点：
###语法更加现代化
使用es6以上的语法可以使我们代码写得更加优雅简洁，而转换为es5后可以在低版本的浏览器上正常运行。
###提升开发效率
无需手动将es6以上的语法转换为es5，fb-es5可以自动完成，节省开发者的时间和精力。
###支持更多的浏览器
不同版本的浏览器对于es6以上的语法支持程度不同，使用fb-es5可以让代码在更多的浏览器上正常运行。
##总结
fb-es5是一个实用的JavaScript编译器，可以将es6以上的代码转换为es5，使代码在低版本的浏览器上正常运行。在使用中要注意配置选项，并结合其他工具一起使用，如webpack等。使用fb-es5可以提升开发效率，让代码更简洁明了，使代码的兼容性更强。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572cf81e8991b448e9044
