Vue学习之Babel配置(十六）

1、Babel：  （官网：https://www.babeljs.cn/docs/）

 一、Babel 是一个 JavaScript 编译器；

二、Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便可以运行在当前和旧版本的浏览器或其余环境中。

三、 Babel的做用：

　　①、语法转换

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

　　③、源码转换 (codemods)

2、Babel配置思路：

　　在webpack中，默认只能处理 一部分ES6的新语法，一些更高级的ES6或者ES7 语法，webpack是处理不了的；这时候，就须要借助于第三方的 loader ，来帮助webpack 处理这些高级的语法；当第三方loader 把高级语法转为低级语法以后，会把结果交给 webpack 去打包到bundle.js中；

　经过Babel ，能够帮咱们将高级的语法转换为 低级的语法：

一、在webpack 中，能够运行以下两套命令，安装两套包，去安装babel 相关的loader功能：

①、第一套包：

　　

cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

②、第二套包：

cnpm i babel-preset-env babel-preset-stage-0 -D

二、打开 webpack 的配置文件，在module节点下的rules 数组中，添加一个新的匹配规则：

①、

{ test :/\.js$/, use :'babel-loader',  exclude:/node_modules/ }

②、注意：在配置babel 的loader 规则的时候，必须把node_modules目录，经过 exclude选项排除掉：缘由有俩：

I、若是不排除 node_modules ，则babel 会把 node_modules 中全部的第三方JS文件，都打包编译，这样，会很是消耗CPU，同时，打包速度很是慢；

II、哪怕，最终，babel 把全部的node_modules 中的JS 转换完毕了，可是，项目也没法正常运行。

三、在项目的 根目录中，新建一个叫作：.babelrc的Babel 配置文件，这个配置文件，属于JSON 格式，因此，在写.babelrc 配置的时候，必须符合JSON语法规范：不能写注释，字符串必须用双引号；

①、在.babelrc 写下的配置：你们能够把 preset 翻译成 【语法】 的意思：

{
    "presets": [" env","stage-0"],
    "plugins": ["transform-runtime"]
}

四、目前，咱们安装的  babel-preset-env 是比较新的es语法，以前，咱们安装的是babel-preset-es2015，如今，出了一个更新的语法插件，叫作 babel-preset-env ,它包含了全部的 和es **相关的语法。