作者：多巴胺1.Babel是什么？Babel是一个可以将使用ES2015+语法的代码编译成向后兼容代码的工具。当我们使用更高版本的EcmaScript的Javascript语法特性时，我们将编写的代码转换为兼容ES5的代码，旨在支持尽可能多的平台。对于转换规则，主要有两种类型：Sytanx类型。比如箭头函数、const/let等语法特性，Babel可以通过各种插件实现兼容。运行时API。比如数组的静态方法Array.from()、实例方法arr.includes()等，需要引入corejs作为polyfill（垫片），以便在运行时提供支持。2.功能模块构成核心库——@babel/core@babel/core模块是一个可以完成代码字符串转换的库。babel的所有插件都是通过核心库来开发和加载的，如下：使用示例：constbabel=require("@babel/core");babel.transform("code",optionsObject);命令行工具——@babel/cli我们在使用核心库的时候，一般不会直接在代码中调用@babel/core提供的api，而是使用bable提供的命令行工具对源码进行转换。一般我们在使用的时候都是在package.json文件中配置成scripts脚本来转换指定文件夹的js语言。比如下面的例子，当我们运行npmrunbabel时，完成后就可以将根目录src目录下的所有js文件进行转换，放到根目录dist中。"scripts":{"babel":"babelsrc--out-dirdist"}，其实就是起到代码转换的作用——各种PluginBabel的语法转换功能依赖于各种插件。例如，当我们使用箭头函数转换插件@babel/plugin-transform-arrow-functions时，当我们配置这个插件时，源代码中的箭头函数将被转换为一个普通的Javascript函数。//源代码constprint=(a)=>console.log(a)//目标代码varprint=functionprint(a){returnconsole.log(a);};插件集合——Presets顾名思义，preset(Preinstallation)是多个插件的集合。例如，当我们在开发场景中需要使用箭头函数和可选运算符时，我们可以将@babel/plugin-transform-arrow-functions和@babel/plugin-proposal-optional-chaining组合起来形成一个预设，当我们遇到需要再次使用箭头函数和可选运算符的转换场景，我们可以直接使用这个预设，而不用单独配置一个Plugin。官方提供了四种Presets，其中@babel/preset-env是我们常用的presets，它提供了最新的Javascript语法转换，使用它，可以让你的生活更轻松！配置文件——推荐js形式上面的介绍中有很多具体的配置，那么我们在哪里配置Plugin/Presets呢？官方给出了多种文件类型和多种不同的文件。这里推荐使用babel.config.js——即在根目录下创建babel.config.js，并在其中导出presets和plugins对象。当我们使用Javascript进行配置时，我们有更多的控制权。可以通过代码的形式控制不同的语法转换规则在不同的目标环境中的应用。//根目录下babel.config.js文件中的内容constplugins=['@babel/plugin-transform-arrow-functions','@babel/plugin-proposal-optional-chaining']constpresets=[['@babel/env',{useBuiltIns:'usage',corejs:3}]]module.exports={plugins,presets}3.Babel的具体配置规则在使用babel之前，我们先安装@babel/core，@babel/cli，命令如下：npminstall--save-dev@babel/cli@babel/core在你项目的编译脚本中，添加如下脚本配置："scripts":{"babel":"babelsrc--out-dirdist"},1.只做语法转换。当我们只是想尝试一个新的Javascript语法特性时，可以直接安装该语法特性对应的Plugin。例如，当我们使用可选操作符（?.）时，我们可以安装@babel/plugin-proposal-optional-chaining。npminstall--save-dev@babel/plugin-proposal-optional-chaining后，在目录下新建一个.babel.js文件，写入这个Plugin的配置并导出。constplugins=['@babel/plugin-transform-arrow-functions',]module.exports={plugins}那么我们尝试使用一下，就会发现转换成功了。//源代码constbaz=obj?.foo?.bar?.baz;//转换后的varbaz=obj===null||对象===无效0？void0:(_obj$foo=obj.foo)===null||_obj$foo===void0?void0:(_obj$foo$bar=_obj$foo.bar)===空||_obj$foo$bar===void0?void0:_obj$foo$bar.baz;2。推荐使用为了尽可能少关心插件，我们可以使用官方的@babel/preset-env。当我们配置这个Preset的时候，让babel同时支持Syntax级别和built-ins级别的转换。为了支持内置转换，我们需要添加useBuiltIns的配置，具体步骤如下：//Install@babel/preset-envnpminstall--save-dev@babel/preset-env//Install@babel/preset-env//core-js@3//由于built-in是运行环境的依赖，使用--savenpminstall--savecore-js@3//.babel.js配置constpresets=[['@babel/env',{//这个配置项的值可以配置为entry/usage//entry:注入目标环境不支持的所有内置类型语法//usage:注入所有使用的不被目标环境支持的内置类型目标环境语法useBuiltIns:'usage',//built-in需要corejs的支持。corejs3支持对象实例方法corejs:3}]]module.exports={presets}3.@babel/plugin-transform-runtime使用这个插件主要有两个原因：默认情况下，babel是内置类型转换的，在源码的每个文件中都会引入core-js的辅助函数，即有时是不必要的。当使用@babel/plugin-transform-runtime时，所有的助手将只引用@babel/runtime。这个插件可以提供一个运行的沙箱环境。如果直接使用core-js，那么对于Promise、Set等对象，全局作用域就会被污染。如果你现在开发一个工具包，你使用core-js来提供Promise和Set的语法转换。当有人将你的工具包引入到他的项目中时，恰好他的项目中已经实现了Promise、Set等功能，这就会导致复杂的冲突。配置如下：//Install@babel/plugin-transform-runtimenpminstall--save-dev@babel/plugin-transform-runtime//安装生产环境依赖//这里以及是否使用core-js和core-js版本相关//corejs:falsesenpminstall--save@babel/runtime//corejs:3下面配置示例中的corejs版本npminstall--save@babel/runtime-corejs3//corejs:2npminstall--save@babel/runtime-corejs2//.babel.jsconfigurationdetails//这里是nodejs配置中的推荐用法constplugins=[['@babel/plugin-transform-runtime',{corejs:3}]]//在这里它需要注意的是，我们在使用@babel/runtime-corejs2时，原来的corejs@3不需要使用constpresets=[['@babel/env']]module.exports={plugins,presets}动动你的手，关注作者公众号！更多精彩内容等你来~回复Node.js教程获取入门课程回复
