6.28学习 babel转换，es6的装饰器
- 1.babel转换
- 1.1出现问题
- 1.2babel转换
- 2.装饰器
- 2.1类装饰器
- 2.2方法装饰器
1.babel转换
1.1出现问题
先来一段代码，运行，有可能是会报错的，为什么呢？因为JS以前只能运行在浏览器中，Node.js 出现之后，不管是服务器上，还是我们自己的的笔记本上，只要安装了 Node.js 就可以运行 JS 代码了。所以是node帮我们运行了代码的。
有可能报错的原因是node的版本很多，这种很新的语法可能在低版本的node版本是不支持的。
class Animal{
static flag = '哺乳类';
constructor(){
this.name = 'XXX'
}
say(){
console.log('say')
}
}
let animal1 = new Animal();
console.log(animal1,Animal.flag)
animal1.say()
目前我的node版本是14.15.1，是可以支持的
但是我把node的版本降为8.17.0的话，就会报错的
我们下面就以8.17.0的版本演示下面的内容。
1.2babel转换
如果版本不支持的话，我们就可以用babel/将我们的高级代码(es7等)转换为es5代码。这里就要装一个包babel-cli。但是babel-cli是以前的写法了，现在一般是@babel/cli。执行命令:
npm init npm install @babel/cli --dev
安装后会发现在node_modules目录下多一个.bin目录
这里再引入一个 npx命令，它是node5.2版本以上会提供的，帮我们执行node_modules/.bin目录下的文件。那我们执行下 npx babel试一下
看到报错了，未找到@babel/core模块。那我们再npm install @babel/core --dev把它装上后再试一下npx babel
还是报错，语法不对这里是。要告诉它编译的是哪个文件和编译后要变成什么文件。
会发现确实目录下多了个编译后的文件，我这里是es5.js。但是打开一看发现，跟原来编译前的代码一摸一样！！！那不是没编译嘛。
其实是 @babel/core只做转换的动作，但是你还需要告诉它转换的规则是什么。这里就要在你项目的最外层，和node_modules同级目录建一个.babelrc文件。
我们下载包@babel/preset-env,并且在.babelrc中配置
{
"presets": ["@babel/preset-env"],
"plugins": []
}
然后再执行我们的npx命令(我的是npx babel .\index.js -o ./es5.js),发现编译出来的文件不一样了！！！
再运行
但是这个@babel/preset-env包也只能转换已定案的语法，像更高级的语法，例如装饰器，static xxx = 'xx’等还是无法转译的。
@babel/plugin-proposal-class-properties 这个包就是用来转换static xxx = ‘xx’(类的属性的) 不支持的话可以安装。
其实npx的执行顺序可以看作 @babel/cli ==> @babel/core ==> 转换(读取.babelrc中的配置)
2.装饰器
2.1类装饰器
装饰器写在类外面的是类装饰器
//装饰器 mobx nest vue
//装饰器可以修饰 类的属性 类的原型上的方法
//修饰的时候就是把这个类 属性... 传递给修饰的函数
@flag
class Animal{
// static flag = '哺乳类';
name = 'XXX'
say(){
console.log('say')
}
}
function flag(Constructor){
Constructor.type = '哺乳类'
}
console.log(Animal.flag)
类装饰器有个参数，就是会被装饰的类
这里执行npx命令就会报错
他还给了提示，那我们就把@babel/plugin-proposal-decorators装上，并且在.babelrc中配置
{
"presets": ["@babel/preset-env"],
"plugins": ["@babel/plugin-proposal-decorators"]
}
再来npx，还是报错。。。
,babelrc配置写错了
{
"presets": ["@babel/preset-env"],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }]
]
}
再npx可以的了
上面的装饰器是可以传参的，例如
@flag('哺乳类')
function flag(value){
return function (Constructor) {
Constructor.type = value
}
}
其实@flag可以看成个语法糖
@@flag('哺乳类')
flag('哺乳类')(Animal)
function flag(value){
return function (Constructor) {
Constructor.type = value
}
}
2.2方法装饰器
写在类里面的装饰器就是方法装饰器，他有三个参数的。第一个参数是类的原型对象，上例是Animal.prototype，装饰器的本意是要“装饰”类的实例，但是这个时候实例还没生成，所以只能去装饰原型（这不同于类的装饰，那种情况时target参数指的是类本身）；第二个参数是所要装饰的属性名，第三个参数是该属性的描述对象。
@flag
class Animal{
// static flag = '哺乳类';
@readonly
name = 'XXX'
say(){
console.log('say')
}
}
function flag(Constructor){
Constructor.type = '哺乳类'
}
console.log(Animal.type)
//直接编译会出错的 npx babel .\class-decorator.js -o es5.js
//1)类的静态属性
//2)类的属性(实例上的属性)
// function readonly() {
// console.log(arguments)//有三个参数 Animal的实例 属性 配置项({
configurable: true,
enumerable: true,
writable: true,
initializer: [Function: initializer]
})
// }
function readonly(target,property,descriptor) {
console.log(target == Animal.prototype)
}
所以把这段代码编译后执行会报错，
因为这个时候实例还没生成，这样写就不会报错
setTimeout(function () {
console.log(target == Animal.prototype);
});
方法装饰器可以修改属性的描述对象（descriptor），然后被修改的描述对象再用来定义属性。
我们在方法前面定义一个装饰器，它的第三个参数是不一样的
//装饰器 mobx nest vue
//装饰器可以修饰 类的属性 类的原型上的方法
//修饰的时候就是把这个类 属性... 传递给修饰的函数
@flag
class Animal{
// static flag = '哺乳类';
@readonly
name = 'XXX'
@before
say(){
console.log('say')
}
}
function flag(Constructor){
Constructor.type = '哺乳类'
}
console.log(Animal.type)
function readonly(target,property,descriptor) {
setTimeout(() => {
console.log(target == Animal.prototype)
console.log(descriptor)
});
}
function before(target,property,descriptor) {
console.log(descriptor)
}
可以写一些逻辑代码，例如切片
function before(target,property,descriptor) {
console.log(descriptor)
let oldSay = descriptor.value;
descriptor.value = function () {
console.log('before')
oldSay.call(target)
}
}
let animal = new Animal()
animal.say()
结果:
