What can I learn from this article?

  1. Make old projects (based on Vue-CLI) support new (experimental) ES syntax, such as “optional chain “.
  2. Learn about other new ES grammars that are currently in the experimental stage.

Optional chain

Recently saw a number of groups in the chat “optional chain “, so the unit of the old project also opened the” optional chain “function, using a month after the feeling is: no longer need to write so long “undefined” judgment, optional chain” really fragrant “.

const obj = {
  foo: {
    bar: {
      baz: 42,}}};consta = obj? .a;// undefined if there is no "?" But there was an error
/ / equivalent to the
// const a = (null === obj || undefined === obj) ? undefined : obj.a;
constbaz = obj? .foo? .bar? .baz;/ / 42
constbaz = obj? .'foo']? .bar? .baz/ / 42
Copy the code

Note:

  1. The recently released Vue-CLI3 already supports “optional links” by default, so you can test it out before installing it.
  2. Optional links are also supported by default if you are using a version later than 3.7.

To install “ES New Features “, vue-CLI3 is required

The first step

yarn add -D @babel/plugin-proposal-optional-chaining
Copy the code

The second step

Find the “babel.config.js” file in the project root directory and modify the “presets” field:

module.exports = {
    presets: [
        '@vue/cli-plugin-babel/preset'].plugins: [// Optional chain plugins. Other Babel plugins are installed the same way
        "@babel/plugin-proposal-optional-chaining"]}Copy the code

Other playable NEW ES features (experimental)

Babeljs. IO /docs/en/plu…

Select a few interesting instructions, others you can look at the official website:

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

“Not undefined and not NULL” judgment

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

var nl = null;
var res = nl ?? 1 / / 2
Copy the code

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

Short – circuit shorthand for assignment after judgment.

let a = false;
a ||= 1; / / 1
Copy the code

The compiled code looks like this:

var a = false;
a || (a = 1);
Copy the code

@babel/plugin-proposal-function-bind

Use the “::” symbol instead of the “bind”, “call” syntax.

obj::func
/ / equivalent func. Bind (obj)

::obj.func
/ / equivalent obj. Func. Bind (obj)

obj::func(val)
// Equivalent func.call(obj, val)

::obj.func(val)
Call (obj, val)

$('.some-link').on('click', ::view.reset);
/ / equivalent $('. Some - link ') on (' click 'view. Reset. Bind (view));
Copy the code

A more complex example:

const { map, filter } = Array.prototype;

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

Copy the code

@babel/plugin-proposal-partial-application

Function coriatization

function add(x, y) { return x + y; }
const addOne = add(1, ?); // Return function addOne
addOne(2); / / 3
Copy the code

@babel/plugin-proposal-private-methods

Private keyword “#”

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++; }}Copy the code

Other features

Other features may not be commonly used in business code (you don’t need to read my article to learn them 😁), but you can take a look at the Experimental bebal features.

conclusion

In fact, here is the most practical is the “optional chain” function, everyone quickly start to use it, let the old project code more elegant, come on 💪.

🔥typescript series

The basic tutorial starts here

Lesson one: Playing typescript

Lesson two, basic types and introductory Advanced types

Lesson three, generics

Lesson four, interpret advanced types

Lesson 5: What is a Namespace

Learn typescript in the vue3🔥 source 🦕 – “is”

Lesson 6. What is a Declare? 🦕 – Global declaration

🔥typescript – Practice typescript (line 59)

🔥 past popular articles

🔥 Common regular daquan 2020

🚆 novice front end do not panic! Here you go ✊10 straws 🍃

True.1px border, 🚀 support for any number of edges and rounded corners, 1 panacea method

🚀 Reveals the vue/ React component library 🤚5 “wheels the author didn’t build”

The Vue/React UI library uses several DOM apis 🚀

weibo

Just play micro-blog, we can follow each other, hehe

WeChat group

Thank you for reading, if you have any questions, you can add my wechat, AND I will pull you into the wechat group (because Tencent limits the number of wechat groups to 100, after the number exceeds 100, the group members must pull you in)