告别无聊的undefined判断, 让老vue-cli3支持"可选链"等"ES2020"特性

本文能学到什么?

让老项目(基于vue-cli)支持ES新语法(处于试验阶段), 比如"可选链".
了解其他目前在实验阶段的ES新语法.

可选链

近期看到多个群中都在聊"可选链", 所以就把单位的老项目也开启了"可选链"功能, 使用了1个月后的感受就是: 再也不用写那么长的"undefined"判断了, 可选链"真香".

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

const a = obj?.a; // undefined, 如果没有"?"可就报错喽
// 等价于
// const a = (null === obj || undefined === obj) ? undefined : obj.a;
const baz = obj?.foo?.bar?.baz; // 42
const baz = obj?.['foo']?.bar?.baz // 42
复制代码

注意:

近期发布的vue-cli3已经默认支持"可选链", 大家可以先试下是否支持再安装.
使用ts的小伙伴, 如果使用的是3.7以后的版本, 那么默认也支持"可选链".

安装"ES新特性", 需要vue-cli3

第一步

yarn add -D @babel/plugin-proposal-optional-chaining
复制代码

第二步

项目根目录下找到"babel.config.js"文件, 修改"presets"字段:

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'
    ],
    plugins:[
        // 可选链插件, 其他babel插件也是一样的安装方式
        "@babel/plugin-proposal-optional-chaining"
    ]
}
复制代码

其他可玩的ES新特性(实验阶段)

通过babel的官网, 我们可以看到babel支持的"ES新特性" 参考: babeljs.io/docs/en/plu…

挑几个有意思的说明下, 其他的大家可以自行看下官网说明:

@babel/plugin-proposal-nullish-coalescing-operator

"非undefined且非null"判断

var object1 = {}
var foo = object1.foo ?? "default"; // "default"

var nl = null;
var res = nl ?? 1 // 2
复制代码

@babel/plugin-proposal-logical-assignment-operators

短路符判断后赋值的简写.

let a = false;
a ||= 1; // 1
复制代码

编译后的代码是这样的:

var a = false;
a || (a = 1);
复制代码

@babel/plugin-proposal-function-bind

用"::"符号来代替"bind", "call"语法.

obj::func
// 等价 func.bind(obj)

::obj.func
// 等价 obj.func.bind(obj)

obj::func(val)
// 等价 func.call(obj, val)

::obj.func(val)
// 等价 obj.func.call(obj, val)

$('.some-link').on('click', ::view.reset);
// 等价  $('.some-link').on('click', view.reset.bind(view));
复制代码

复杂点的例子:

const { map, filter } = Array.prototype;

let sslUrls = document.querySelectorAll('a')
                ::map(node => node.href)
                ::filter(href => href.substring(0, 5) === 'https');

复制代码

@babel/plugin-proposal-partial-application

函数科里化

function add(x, y) { return x + y; }
const addOne = add(1, ?); // 返回函数addOne
addOne(2); // 3
复制代码

@babel/plugin-proposal-private-methods

私有属性关键词"#"

class Counter extends HTMLElement {
  #xValue = 0;

  get #x() { return this.#xValue; }
  set #x(value) {
    this.#xValue = value;
    window.requestAnimationFrame(
      this.#render.bind(this));
  }

  #clicked() {
    this.#x++;
  }
}
复制代码