一、基本配置1、基本依赖包npmibabel-loader@babel/core-D2.添加.babellrc配置文件{"presets":[],//preset"plugins":[]//Plugin}3.package.json声明package.json中声明的browserslist影响babel和postcss。Babel首先读取.babelrc文件中@babel/preset-env的targets属性。为了统一，建议在包中声明"browserslist"":[">1%","last2versions","notie<=8"]二、转码Babel只转换新的JavaScript语法（syntax），但不是新的API，如果要完全转换代码需要配合其他依赖1.@babel/preset-env+@babel/polyfillnpmi@babel/preset-env@babel/polyfill-D.babelrcconfiguration{“presets”:[[“@babel/preset-env”,{“useBuiltIns”:“entry”,“modules”:false,“corejs”:2}]]}参数：模块："amd"|"umd"|"systemjs"|"commonjs"|"cjs"|"auto"|false，默认值为autouseBuiltIns:"usage"|"entry"|false，默认值为false。{"chrome":"58","ie":"11"}corejs:2|3modules:用于转换ES6的模块语法，如果为false，则不转换文件的模块语法。如果要使用webpack的一些新特性，比如treeshaking和sideEffects，需要设置为false，并且不转换ES6模块文件，因为这些特性只对ES6模块有效corejs:@新版本babel/polyfill包含core-js@2和core-js@3版本，所以需要声明版本，否则webpack运行时会报warning。useBuiltIns:false:需要在js代码的第一行主动导入'@babel/polyfill'，会导入整个@babel/polyfill包。（不推荐，可以覆盖所有API的翻译，但体量最大）入口：需要在js代码第一行主动引入'@babel/polyfill'，所有不支持的shimbrowserslist环境将被导入。（可以覆盖'hello'.includes('h')的语法，足够安全，代码量也不是特别大）用法：不需要在项目中主动导入，它会自动导入什么代码中已经用到了，browserslist环境不支持shim导入。（但是无法检测到'hello'.includes('h')的语法，这种原型链上的语法问题不会被转换targets：用于配置需要支持的环境，不仅仅支持浏览器,但也支持节点。如果没有配置targets选项，会读取项目中loose的browserslist配置项：默认值为false，如果preset-env中包含的插件支持loose设置，则可以使用该字段进行统一设置2、@babelconfig{"presets":[["@babel/preset-env",{"modules":false}]],"plugins":[["@babel/plugin-transform-runtime",{"corejs":2//recommended}]]}corejs:defaultvalue如果为false，则需要安装@babel/runtime只是为了转换语法，而不是处理新的API。当设置为2时，需要安装@babel/runtime-corejs2，然后才会对API进行处理。但是无法检测到像'hello'.includes('h')这样的语法助手：默认值为true，用于启用是否使用助手函数来重写语法转换函数。useESModules：默认值为false，是否对文件使用ES模块语法，使用ES模块语法可以减小文件大小。与@babel/preset-env+@babel/polyfill相比，可以翻译语法和新的API，但是存在全局污染问题；@babel/preset-env+@babel/plugin-transform-runtime+@babel/runtime-corejs2，可以按需要导入，翻译语法，新API，避免全局污染（@babel/polyfillinbabel7是别名@babel/runtime-corejs2),但无法检测到'hello'.includes('h')的语法；推荐如果是自己的应用：@babel/preset-env+@babel/polyfillnpmibabel-loader@8@babel/core@babel/preset-env-Dnpmi@babel/polyfill@babel/runtime.babelrc配置文件{"presets":[["@babel/preset-env",{"modules":false,//推荐"useBuiltIns":"entry",//推荐"corejs":2,//新版本of@babel/polyfill包含core-js@2和core-js@3版本，所以需要声明版本，否则webpack运行时会报警告，这里暂时使用core-js@2版本（@core-js@3会在最后附上。使用)}]],"plugins":[["@babel/plugin-transform-runtime",{"corejs":false//解决辅助函数重复引入}]]}如果是第三方公共库：@babel/preset-env+@babel/plugin-transform-runtime+@babel/runtime-corejs2npmibabel-loader@8@babel/core@babel/preset-环境@babel/插件in-transform-runtime-Dnpmi@babel/runtime-corejs2.babelrc配置文件["@babel/plugin-transform-runtime",{"corejs":2//Recommended}]]}3、随着corejs3的发布，@babel/polyfill无法提供core-js@2给core-js@3过渡，所以有新的替代@babel/polyfill需要将babel-loader版本升级到8.0.0以上，@babel/core版本升级到7.4.0以上。polyfill垫片方案升级策略：npmibabel-loader@babel/core@babel/preset-env-Dnpmicore-jsregenerator-runtime@babel/runtime.babelrcconfiguration{"presets":["@babel/preset-env",{"modules":false,//不要将ES6模块文件转换为使用treeshaking、sideEffects等。"useBuiltIns":"entry",//导入browserslist环境不支持的所有shim"corejs":{"version":3,//使用core-js@3"proposals":true,}}]],"plugins":[["@babel/plugin-transform-runtime",{"corejs":false//解决辅助函数重复引入}]]}手动导入import"core-js/stable"import"regenerator-runtime/runtime"transform-runtime升级策略：npm??ibabel-loader@babel/core@babel/preset-env@babel/plugin-transform-runtime-Dnpmi@babel/runtime-corejs3。babelrc文件配置{"presets":[["@babel/preset-env",{"modules":false,}]],"plugins":["@babel/plugin-transform-runtime",{"corejs":{"version":3,"proposals":true},"useESModules":true}]]}4.proposallevel的推荐新版babel舍弃阶段preset，最多只支持stage-4级别，proposal阶段的特性基本已经从@babel/preset-env、@babel/polyfill等包中移除，需要额外配置{"plugins":[//Stage0"@babel/plugin-proposal-function-bind",//Stage1"@babel/plugin-proposal-export-default-from","@babel/plugin-proposal-logical-assignment-operators",["@babel/plugin-proposal-optional-chaining",{"loose":false}],["@babel/plugin-proposal-pipeline-operator",{"proposal":"minimal"}],["@babel/plugin-proposal-nullish-coalescing-operator",{"loose":false}],"@babel/plugin-proposal-do-expressions",//阶段2["@babel/plugin-proposal-decorators",{"legacy":true}],"@babel/plugin-proposal-function-sent","@babel/plugin-proposal-export-namespace-from","@babel/plugin-proposal-numeric-separator","@babel/plugin-proposal-throw-expressions",//阶段3"@babel/plugin-syntax-dynamic-import","@babel/plugin-syntax-import-meta",["@babel/plugin-proposal-class-properties",{"loose":false}],"@babel/plugin-proposal-json-strings"]}
