babel的常用插件

今天给大家介绍几款babel的常用插件：

1.@babel/plugin-proposal-class-properties

该插件可以让你在类中书写初始化字段

代码语言：javascript复制

class A {
    a = 1;
    constructor(){
        this.b = 3;
    }
}

2.@babel/plugin-proposal-function-bind

该插件可以让你轻松的为某个方法绑定this

代码语言：javascript复制

function Print() {
    console.log(this.loginId);
}

const obj = {
    loginId: "abc"
};

obj::Print(); //相当于：Print.call(obj);

遗憾的是，目前vscode无法识别该语法，会在代码中报错，虽然并不会有什么实际性的危害，但是影响观感

3.@babel/plugin-proposal-optional-chaining

代码语言：javascript复制

const obj = {
  foo: {
    bar: {
      baz: 42,
    },
  },
};

const baz = obj?.foo?.bar?.baz; // 42

const safe = obj?.qux?.baz; // undefined

4.babel-plugin-transform-remove-console

该插件会移除源码中的控制台输出语句

代码语言：javascript复制

console.log("foo");
console.error("bar");

编译后

代码语言：javascript复制

5.@babel/plugin-transform-runtime

用于提供一些公共的API，这些API会帮助代码转换

希望对你有所帮助。

babel.js

0 人点赞