在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 可以把 高级语法 转变为 低级语法
步骤:
-
在 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
-
打开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转换完毕了,但是,项目也无法正常运行!
-
在项目的根目录中,新建一个 叫做
.babelrc
的Babel配置文件,这个配置文件,属于JSON格式,所以,在写 .babelrc 配置的时候,必须符合JSON语法规范:不能写注释,字符串必须用双引号
3.1、 在 .babelrc 写如下配置: 大家可以把 presets 翻译成 语法 的意思{ "presets": ["env","stage-0"], "plugins": ["transform-runtime"] }
-
了解:目前,我们安装的 babel-preset-env ,是比较新的ES语法,之前,我们安装的babel-preset-es2015, 现在,出了一个更新的 语法插件,叫做 babel-preset-env,它包含了 所有的 和es***相关的语法