Babel在前端工程开发中起着至关重要的作用。它可以将更高级的语法转换为浏览器可识别的代码，无论是es6、promise还是React、TypeScript中的const。在下方babel在线工具左侧输入代码，右侧输入编译结果。设置浏览器兼容版本后，可以看到“const”被编译成“var”，“箭头函数”被编译成“普通函数”。在命令行中使用babel与之前提到的postcss是一样的。它可以通过命令行运行来解析文件夹或文件。安装命令行工具需要的依赖，npminstall@babel/cli@babel/core-D通过npx执行.bin目录下的指令，--out-file表示输出文件地址，执行编译语句npxbabelsrc--out-filedist/main.js但是我们发现目标文件和源文件代码是一样的，const和箭头函数没有编译。这是因为我们没有设置编译代码所需的插件。上面代码中有标识符和箭头函数，你需要[安装]使用这些插件来转换箭头函数：@babel/plugin-transform-arrow-functionsconvertconst:@babel/plugin-transform-b??lock-scopingplugin需要通过--在命令后添加的插件npxbabelsrc--out-filedist/function.js--plugins=@babel/plugin-transform-arrow-functionsnpxbabelsrc--out-filedist/const.js--plugins=@babel/plugin-transform-b??lock-scopingnpxbabelsrc--out-filedist/plugins.js--plugins=@babel/plugin-transform-arrow-functions,@babel/plugin-transform-b??lock-scoping指定插件后，babel会根据插件的功能进行编译，但插件只能实现单一功能。通常，我们的代码中不仅有const和箭头函数语法。当需要处理的代码类型比较多的时候，可能需要罗列很多。插件是执行的，所以babel提供了一个叫做“presets”的插件集合，会按照我们配置的逻辑进行编译，使其兼容。安装@babel/preset-env依赖项后，在命令行上使用--presets而不是--plugins。npxbabelsrc--out-filedist/presets.js--presets=@babel/preset-envbabel-loader除了在命令行直接通过babel编译文件外，更多情况下，批处理文件会在项目。这时候就需要使用babel-loader进行处理了。安装依赖npminstallbabel-loader@babel/core@babel/core是babel的核心。在webpack.config.js文件中配置js的处理规则。如果不清楚配置可以参考webpack初体验和loader配置方法，这里和命令行执行一样，需要配置“plugins”或者“presets”。constpath=require("path");module.exports={entry:"./src/index.js",output:{filename:"./bundle.js",path:path.resolve(__dirname,"./dist"),},mode:"development",devtool:"source-map",module:{rules:[{{test:/\.js/,排除:/node_modules/,使用:[{"babloader-loader",options:{//“Plugins”是这样配置的，这里我们直接使用“presets”//plugins:[//"@babel/plugin-transform-arrow-functions",luabel///"@gin-transform-b??lock-scoping",//],预设：["@babel/preset-env"],},},],},],},};这样babel就会编译出我们需要的代码兼容性要求这里我们没有设置我们需要兼容什么样的浏览器。使用浏览器列表的默认配置。browserslist的作用及详细介绍设置babel兼容处理规则的方式有两种。browserslist:为CSS设置的兼容规则，对js通用，可以在.browserslist中配置或者package.json文件中的目标：在webpack.config.js中配置加载程序的选项。以上两种方式都可以配置，但是推荐使用browserslist，因为css和js需要兼容的浏览器版本。一般来说，它们是一致的，要使用browserslist，只需要配置一套规则即可。比如我们设置为兼容GoogleChrome99版本//package.json"browserslist":["chrome99"]//configureinwebpack.config.jsuse:[{loader:"Babel-Loader",Options:{Presets:["@Babel/Preset-En",{targets:["chrome99"],},],],},]，因为chrome99是最新的浏览器版本，可以支持高级js语法，所以不需要将es6编译成es5语法。babel处理文件不仅仅在js中需要，如果是react项目，还需要支持jsx文件，可能还有ts文件，所以可以把babel的配置信息单独放在一个文件中，达到共享的目的.//webpack.config.js规则：[{test:/\.js/,exclude:/node_modules/,use:[{loader:"babel-loader",},],},],//babel.config.jsmodule.exports={预设：["@babel/preset-env"],};polyfill上面的babel可以处理一些js语法，但是一些新的特性比如promise默认是不会处理的，所以不能被低版本的浏览器识别。那么我们就需要使用“polyfill”对一些特定的语法进行打补丁和处理，让编译后的代码中包含这些新特性。babel7.4之前，通过@babel/polyfillbabel7.4之后，这里通过core-jsregenerator-runtime使用的babel版本是7.17，所以使用第二种方法，安装依赖npminstallcore-jsregenerator-runtime@babel/runtime-corejs3，为babel.config.js中的presets配置polyfill相关属性useBuiltIns：指定如何使用polyfillfalse：不使用polyfill，不需要配置corejssusage：自动检测源码需要的polyfill，需要配置corejsentry：导入所有polyfill，文件很大，需要配置corejs，在入口文件中引入core-js和regenerator-runtimecorejs：使用的corejs版本//babel.config.jsmodule.exports={presets:[["@babel/preset-env",{useBuiltIns:"entry",corejs:3,},],],};//入口文件import"core-js/stable";导入“再生器运行时/运行时”；使用所有的polyfills，编译到最后的代码行数达到了17000行，其中包含了很多新特性的实现，并且支持React。React使用jsx语法，可以直接用babel处理。和js文件的处理方式一样，可以选择使用“plugins”或者插件集合“presets”。plugin@babel/plugin-syntax-jsx@babel/plugin-transform-react-jsx@babel/plugin-transform-react-display-namepreset@babel/preset-react//babel.config.jsmodule.exports={预设:[["@babel/preset-env",{useBuiltIns:"entry",corejs:3,},],["@babel/preset-react"],],};react代码处理编译成功，浏览器可以看到渲染页面效果处理TypeScript文件ts-loader项目中处理ts文件的方式有两种：将ts文件编译成js文件，带类型检测，不带polyfillbabel-loader：带polyfill，没有类型检测，不会提示代码错误。首先我们看一下ts-loader的处理过程。安装ts-loader。ts-loader依赖于typescript工具。npminstallts-loadertypscript-DConfigurets-inwebpack.config.jsloaderprocessestsfilesmodule:{rules:[{test:/\.ts$/,exclude:/node_modules/,使用:[{{loader:"ts-loader",},],},],}，可以看到原来ts代码已经完全编译成js代码，只是Promise没有处理，被babel-loader代替了。像react和js一样，你可以选择“plugins”或者插件集合“presets”。插件@babel/plugin-transform-typescriptpreset@babel/preset-typescript将webpack.config.js中的ts-loader替换为babel-loader，并在babel.config.js中进行配置。//babel.config.jsmodule.exports={presets:[[["@babel/preset-env",{useBuiltIns:"usage",corejs:3,},],["@babel/preset-typescript"],],};在这种情况下，polyfill处理被添加到编译后的文件中。这里useBuiltIns使用的是usage，代码比入口模式少。从polyfill的角度来看，babel-loader会更好地处理ts文件。毕竟我们写的代码可能会有新的特性和兼容性需求，但是babel-loader的问题是它不能进行错误类型检测，也就是检测不到，即使代码出错了，还是会编译通过.但我们希望在开发阶段尽早发现错误，避免在测试阶段或发布线上出现问题。这里，我们可以配合编译命令来解决这个问题。tsc是typescript工具的命令行语法。执行npmrunbuild通过tsc查看代码是否正确。无误后使用webpack编译，或者执行npmruntype-check-watch实时检查ts代码是否正确//package.json"scripts":{"build":"npmruntype-check&&webpack","type-check":"npxtsc--noEmit","type-check-watch":"npxtsc--noEmit--watch"}，当代码中有语法错误时，报错会直接举报的这样就可以实现ts文件的类型错误检测和polyfill效果。以上关于babel-loader处理js、react、ts文件，以及新特性的polyfills，设置浏览器兼容版本，babel配置文件的内容非常重要。更多关于webpack的内容可以参考我的其他博文，持续更新中~
