webapck .babelrc文件详解

taBabel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。下面列出的是 Babel 能为你做的事情：

语法转换

通过 Polyfill 方式在目标环境中添加缺失的特性 (通过 @babel/polyfill 模块)

源码转换 (codemods)

-----来源于babel官方网站

本指南将想你展示如何将 ES2015+ 语法的 JavaScript 代码编译为能在当前浏览器上工作的代码。这将涉及到新语法的转换和缺失特性的修补。

整个配置过程包括：

1、运行以下命令安装所需的包（package）：

    npm install --save-dev @babel/core @babel/cli @babel/preset-env

    npm install --save @babel/polyfill

2、在项目的根目录下创建一个命名为 babel.config.js 的配置文件，其内容为：

    constpresets = [  ["@babel/env",    {targets: {edge:"17",firefox:"60",chrome:"67",safari:"11.1",      },useBuiltIns:"usage",    },  ],];module.exports = { presets };

重点提一下babelrc文件的配置

官方文档上建议我们在package.json同目录下新建一个babel.config.js文件，实际开发中，包括vue-cli也是直接在根目录下新建.babelrc文件，我们也采用这种。

              presets ： 预设，插件的集合，倒序执行

　　　　plugins ： 插件，先执行插件，在执行预设，顺序执行

　　　　ignore ： 忽略的文件

　　　　minify ： 压缩代码

　　　　common : 是否需要注释

　　　　env ： 设置不同的环境，应用不同的配置，配置取值：BABEL_ENV，如若没有取 NODE_ENV 的值，默认为 development.

.babelrc 配置：主要有两个参数 presets(预设) plugins(插件)

               presets ：是某一类 plugin 的集合，包含了某一类插件的所有功能。

　　　　plugin ： 将某一种需要转化的代码，转为浏览器可以执行代码。

编译的执行顺序：

　　　　1、执行 plugins 中所有的插件

　　　　2、plugins 的插件，按照顺序依赖编译

　　　　3、所有 plugins 的插件执行完成，在执行 presets 预设。

　　　　4、presets 预设，按照倒序的顺序执行。(从最后一个执行)

　　　　5、完成编译。

配置注解

注解：

        targets: 描述您为项目配置的 支持/定位 的环境

        browsers ：浏览器的支持情况，将返回支持浏览器列表。

        modules : 启用将 es6 转为其他模块。

        debug ： 是否启用 console.log　

　　include / exclude : 必须启用的 plugin 功能 / 不启用的 plugin 功能

　　uglify : 压缩代码

　　useBuiltIns ： 

　　　　false ： 引用所有的 babel-polyfill ， 在 webpack 中添加 babel-polyfill 入口处：

　　　　　　　   entry:[ 'babel-polyfill' , 'index.js' ] , 引用所有的 polyfill，体积变大

　　　　true ： 引用部分，根据配置的 preset-env 环境，引用 polyfill ，

　　　　　　　  在入口文件中要引用 babel-polyfill