babel的定义Babel是一个JavaScript编译器，更准确地说是一个源到源的编译器，通常被称为“转译器”。babel-core如果你需要以编程方式使用Babel，你可以使用babel-core包npminstallbabel-corevarbabel=require("babel-core");字符串形式的JavaScript代码可以直接使用babel.transformCompilebabel.transform("code();....",options);//=>{code,map,ast}如果是文件，可以使用异步apibabel.transformFile("./myCode.js",options,function(err,result){result;//=>{code,map,ast}});以上所有方法，options参考http://babeljs.io/docs/usage/...在options中可以设置presets和plugins，也可以创建一个.babelrc文件。选项默认开启读取babelrc文件的功能。下面是启用自定义预设和插件的示例：const{transform,generate}=require('babel-core');constmyPlugin=require('./myPlugin');constmypreset=require('./mypreset');constcode=`d=a+b+c`;vares5Code=transform(code,{plugins:[myPlugin],presets:[mypreset]})console.log(es5Code.code);.babelrc告诉我们在Babel可以做任何事情之前，我们需要创建一个配置文件。您需要做的就是在项目的根目录下创建一个.babelrc文件。然后输入以下内容作为开始：{"presets":[],"plugins":[]}由于babelrc的功能默认是开启的，你可以在options中设置{babelrc:false}来显式关闭它。预设，插件的集合。目前常用的预设有es201x、stage-x、env、latest、react、flow。目前列出的只是babel6的情况。1.es2015check-es2015-constantstransform-es2015-arrow-functionstransform-es2015-block-scoped-functionstransform-es2015-block-scopingtransform-es2015-classestransform-es2015-computed-propertiestransform-es2015-destructuring1formslicturingtransform0dupkey-es2015for-015转换函数-es2-nametransform-es2015-literalstransform-es2015-modules-commonjstransform-es2015-object-supertransform-es2015-parameterstransform-es2015-shorthand-propertiestransform-es2015-spreadtransform-es2015-sticky-regextransform-template-es201在文字transform-es2015-typeof-symboltransform-es2015-unicode-regextransform-regenerator2.es2016transform-exponentiation-operator3.es2017syntax-trailing-function-commastransform-async-to-generatores201x系列，只列出当年ECMAScript公布的新特性中的语法部分，至于API中的新特性，全部都在polyfill中。babel-preset-stage-xJavaScript也有几个提案正在积极通过TC39（ECMAScript标准背后的技术委员会）的流程，成为标准的一部分。这个过程分为5(0-4)个阶段。随着提案获得更多关注并更有可能被标准采纳，它们将继续经历各个阶段，最终在第4阶段被标准正式采纳。以下是5个不同阶段的（打包的）预设：babel-preset-stage-0justideababel-preset-stage-1proposalbabel-preset-stage-2draftbabel-preset-stage-3candidatebabel-preset-stage-4已完成上述每个预设都依赖于以下后期预设。例如babel-preset-stage-0包含babel-preset-stage-1babel-preset-stage-2babel-preset-stage-3。舞台预设是一组不断变化的插件。根据当年发布的标准内容，舞台的插件内容是动态变化的。stage3的候选插件很可能已经完成，在babel的新release版本中会被移除，而在stage2的draft会进入stage3的候选列表，就像一个传递接力棒的过程。当然，草案或候选人名单可能随时被取消。其中stage-0的do语法糖在jsx中可以很好的使用。我们在开发recat的jsx条件判断代码时，可以有以下方法：1.第一种三元表达式{condition1?condition2?result1:result2:result3}2.第二种自执行函数{(()=>{if(a){return...;}else{return...;}})()}3.第三种do{do{if(a){'result1'}else{'result2'}}}babel-preset-env{"presets":[["env",{"targets":{"browsers":["last2versions","safari>=7"]}}]]}当env配置简单的配置为{presets:['env']}，相当于babel-preset-latest（官方已弃用），相当于同时拥有三个babel-preset-es201xpresets的集合。env的执行过程是先读取浏览器配置中的条件。browserslist模块可以根据这些条件得到该条件下所有浏览器的最低版本号列表，env为babel的翻译插件提供浏览器的最低版本号。一个版本号列表，查询两个浏览器版本号列表可以得到一个babel翻译插件集合。browserslist根据条件检测到的浏览器和版本号：1%，Last2versions=>{ie:10,chrome:56...}env提供的翻译插件对应的浏览器版本号列表：{“check-es2015-常量”：{“chrome”：“49”，“edge”：“14”，“firefox”：“51”，“safari”：“10”，“节点”：“6”，“ios":"10","opera":"36","electron":"1"},"transform-es2015-arrow-functions":{"chrome":"47","edge":"13","firefox":"45","safari":"10","node":"6","ios":"10","opera":"34","electron":"0.36"}....finallyResult{plugins:[babelplugin1,babelplugin2...]}babelshimBabel可以编译几乎所有现代JavaScript语法，但API却不是这样。例如，以下带有箭头函数的编译代码：functionaddAll(){returnArray.from(arguments).reduce((a,b)=>a+b);}最终会像这样：returnArray.from(arguments).reduce(function(a,b){returna+b;});}然而，它仍然不能在任何地方工作，因为不是所有的JavaScript环境都支持Array.from。babelshims分为三种类型：babel-runtimebabel-plugin-transform-runtimebabel-polyfillbabel-runtime和babel-plugin-transform-runtime的区别在于前者是手动的，后者是自动的，只要一个api是要翻译的，必须手动添加require('babel-runtime')，babel-plugin-transform-runtime会被工具自动添加。主要功能是为api提供一个沙盒shim解决方案，不会污染全局api，所以适合在第三方开发产品中使用。babel-polyfill通过重写全局原型实现，更适合单独运行的项目。开启babel-polyfill可以直接在代码中require，或者添加到webpack的入口，或者在babel的env中设置useBuildins为true开启。深入理解babel（二）
