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)
}
可以写一些逻辑代码,例如切片文章来源:https://www.toymoban.com/news/detail-516918.html
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()
结果:
文章来源地址https://www.toymoban.com/news/detail-516918.html
到了这里,关于6.28学习 babel转换,es6的装饰器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!