vue ES 模块

本文能学到什么?

让老项目(基于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新特性"

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

@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++;
}
}