vue.js学习笔记二十 六——webpack中的babel

1. class

class是一个关键词，在es6的语法中，用来实现ES6中面向对象编程的方式而提出来的

例如：

class Person{

    static info = {name:'张三',age:20};

}

var p = new Person();

注意：

          在class定义之前，我们是怎么表示类的了？之前我们都是通过Function来定义一个类的。

例如：

function Animal(name){

    this.name=name;

}

var animal = new Anmal('xiaogou');

这种方式，给function赋予了另外一种含义，其本质上还是一个函数，只是我们规定了该函数的函数名首字母大小，可以用this来开辟一些空间存值，这种写法的构造函数并没有真正的去实现面向对象的方式。

2. 静态属性与实力属性

2.1 静态属性

用static修饰的属性称为静态属性，静态属性就是可以直接用类名来访问的属性，与之相对的是实例属性

2.2 实例属性

只能通过类的实例来访问的属性，叫做实例属性

例如：

var p = new Person();

p.name='李四';

这里，name属性是通过Person类的实例对象p来访问的属性，所以叫做实例属性。

3. bable的使用

        打包运行代码，发现报模块解析失败，报错位置是 static info = {name:'张三',age:20}; 提示unexpected token错误以及缺少合适的loader加载器去处理static，这是为什么了？

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

        bable可以处理后缀为.js的文件，通过babel，可以帮我们将高级的语法转为低级的语法，在webpack中，可以运行如下两套命令，安装两套包，去安装babel相关的功能

3.1 bable的安装

第一套（bable的转换工具）：npm i babel-core babel-loader babel-plugin-transform-runtime -D

第二套（bable的语法）：npm i babel-preset-env babel-preset-stage-0 -D

注意：目前我们安装的babel-preset-env是一个比较新的ES语法，之前我们安装的是babel-preset-es2016（也就是ES6的语法），现在出了一个更新的语法插件，叫做babel-preset-env，它包含了所有的和es***相关的语法

3.2 bable的配置

在webpack.config.js配置文件中，在module节点下的rules数组中添加一个新的匹配规则

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

3.2.1 参数解析：

1. test：处理后缀为.js的文件

2. use：使用的加载器

3. exclude：排除的内容

注意：

1. 在之前的匹配规则中，我们只是使用了test与use，在配置bable的时候，需要多加一个属性exclude

2. exclude的属性值，为一个正则表达式。/node_modules/,表示排除node_modules这个目录

3.2.3 exclude属性

为什么在bable中需要加上这个属性，排除掉node_modules这个目录了？

因为

1. bable是要转换js类型的文件，在node_modules文件中存放的js文件都是现成的第三方包，不需要转换，我们自己写的新语法，浏览器不识别才需要转换

2. 如果不排除，bable会将node_modules下的所有的第三方js文件都打包编译，这样，会非常消耗CPU，同时打包速度也很慢

3. 即使最终，bable将所有的node_modules中的js文件转换完毕了，项目也无法正常运行，既然都不能正常运行了，自然就不需要打包编译了。

3.3 bable的配置文件

在项目的根目录下新建一个 .babelrc的bable配置文件，该文件属于json格式的，所以必须符合json规范（不能写注释、字符串必须用双引号）

{

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

3.3.1 配置解释

1. presets：预设，这里我们可以翻译为语法，用一个数组表示，其元素为bable的语法 babel-preset-env babel-preset-stage-0 去掉前缀babel-preset-之后的值env与stage-0

2. plugins：表示插件，用一个数组表示。其元素为bable的插件babel-plugin-transform-runtime去掉前缀babel-plugin-之后的值