Babel编译js(可以把es高级语法 转换为 低级语法)

在ES6中，提供新语法，用 class 关键字，是实现 面型对象变成的方式:

// class 关键字，是ES6中提供的新语法，是用来 使用 ES6 中面向对象编程的方式
class Person {
    // static 静态的。
    // 使用 static 关键字，可以定义静态属性
    // 所谓的静态属性：就是可以直接 通过类名，直接访问的属性
    // 实例属性：只能通过类的实例，来访问的属性，叫做实例属性
    static info = {
        name: 'zs',
        age: 20
    }
}

// 访问 Person 类身上的 info 静态属性
console.log(Person.info);

webapck 打包ES6高级语法的时候出现的问题

在webpack中，默认只能处理一部分ES6的新语法，一些更高级的ES6语法，或者ES7等语法，webpack是处理不了的；这时候，就要借助 第三方loader ，来帮助 webpack 处理这些高级的语法，当第三方loader 把高级的语法转变为 低级的语法后，会交给 webpack 去打包到你自己定义的 dist 文件目录下的 .js 文件中

Babel 可以把 高级语法 转变为 低级语法

步骤：

1. 在 webpack 中，可以运行如下两套命令，安装两套包，去安装 Babel 相关的 loader功能：
   1.1、 第一套包： cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
   1.2、 第二套包： cnpm i babel-preset-env babel-preset-stage-0 -D

2. 打开webpack 的配置文件webapck.config.js，在 module 节点下的 rules 数组中，添加一个新的 匹配规则：
   2.1、 {test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
   2.2、 注意：在配置 babel 的 loader 规则的时候，必须把 node_modules 目录，通过 exclude 选项排除掉：原因有俩：

   • 如果不排除 node_modules ，则Babel 会把 node_modules 中所有的 第三方 JS 文件，都打包编译，这样，会非常消耗CPU，同时，打包速度非常慢
   • 哪怕，最终，Babel 把所有 node_modules 中的JS转换完毕了，但是，项目也无法正常运行！

3. 在项目的根目录中，新建一个 叫做 .babelrc 的Babel配置文件，这个配置文件，属于JSON格式，所以，在写 .babelrc 配置的时候，必须符合JSON语法规范：不能写注释，字符串必须用双引号
   3.1、 在 .babelrc 写如下配置: 大家可以把 presets 翻译成 语法 的意思

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

4. 了解：目前，我们安装的 babel-preset-env ,是比较新的ES语法，之前，我们安装的babel-preset-es2015， 现在，出了一个更新的 语法插件，叫做 babel-preset-env，它包含了 所有的 和es***相关的语法