babel插件 {ignore}

除了预设可以转换代码之外,插件也可以转换代码,它们的顺序是:

  • 插件在 Presets 前运行。
  • 插件顺序从前往后排列。
  • Preset 顺序是颠倒的(从后往前)。

通常情况下,@babel/preset-env只转换那些已经形成正式标准的语法,对于某些处于早期阶段、还没有确定的语法不做转换。
如果要转换这些语法,就要单独使用插件
下面随便列举一些插件

@babel/plugin-proposal-class-properties

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

  1. class A {
  2. a = 1;
  3. constructor(){
  4. this.b = 3;
  5. }
  6. }

@babel/plugin-proposal-function-bind

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

  1. function Print() {
  2. console.log(this.loginId);
  3. }
  4. const obj = {
  5. loginId: "abc"
  6. };
  7. obj::Print(); //相当于:Print.call(obj);

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

@babel/plugin-proposal-optional-chaining

  1. const obj = {
  2. foo: {
  3. bar: {
  4. baz: 42,
  5. },
  6. },
  7. };
  8. const baz = obj?.foo?.bar?.baz; // 42
  9. const safe = obj?.qux?.baz; // undefined

babel-plugin-transform-remove-console

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

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

编译后

@babel/plugin-transform-runtime

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