JS trick之babel-stage語法雜談

JS語法篇

目前前端生態圈採用ES6/7來寫代碼已經成為潮流，babel則是支撐這一潮流的主要pillar。

關於JS語法AST解析，babel提供了stage-X實驗性插件集合供開發者使用。

這部分語法尚在實驗階段，在每次的TC39大會後會不斷的更新stage的等級。 以便能夠以規範的形式進入開發者的視野。

結合個人實踐和babel官方文檔，筆者在此列述以下非常簡便的語法sugar。

插件preset之 babel-preset-stage-4

指數函數簡寫形式(Exponentiation operator transform)

包括async to generator,trailing commas，這個提案已經由stage-3移至stage-4。

let squared = 2 ** 3;// same as: Math.pow(2,3)n let a **= 2; // same as: Math.pow(a,3)n

async generator非同步流控制

這一塊在瀏覽器環境需要增加babel-polyfill添加regeneratorRuntime

(async ()=>{n var data = await new Promise(function(resolve,reject) {n setTimeout(()=>resolve(100),100);n });n console.log(data); //100n })();n

插件preset之 babel-preset-stage-3

rest方式解構對象

// Rest propertiesn let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };n console.log(x); // 1n console.log(z); // { a: 3, b: 4 } n

插件preset之 babel-preset-stage-2

引入decorator處理transform-decorators-legacy

decorator用好的話可以讓代碼非常簡潔

@decoratorn class Bork {}n

轉換class屬性 Class properties transform

class Bork {n //屬性初始化n instanceProperty = "bork";n //綁定thisn boundFunction = () => this.instanceProperty；n //靜態屬性初始化n static staticProperty = "babelIsCool";n }n let myBork = new Bork;n console.log(myBork.boundFunction()); // > "bork"n console.log(Bork. staticProperty); // > "babelIsCool"n

插件preset之 babel-preset-stage-1

transform-class-constructor-call

它提供了將構造函數作為普通函數來使用的方案。 原理上是採用了new.target來引用constructor。 不過在babel7，這個feature將會移除。

class A {n constructor(){n this.a=1;n }n call constructor(){n return 1n }n }n console.log(new A()) ;// {a:1}n console.log(A()) //1n

transform-export-extensions

ES6/7 export import混用體系 這塊內容語法基本和阮一峰老師的ES6語法module部分的文末保持一致。

插件preset之 babel-preset-stage-0

transform-do-expressions

它是三目運算符的複雜版本，在條件分支決定返回值的場景非常有用。

let x = 100, y = 20;n let a = do {n if(x > 10) {n if(y > 20) {n big x, big y;n } else {n big x, small y;n }n } else {n "hello world"n }}n

值得一提的是如果大家使用react框架的話，do表達式簡直太有用了。 比如如下的一個動態組件例子

const Component = color =>n <div className=myComponent>n {do {n if(color === blue) { <BlueComponent/>; }n else if(color === red) { <RedComponent/>; }n else if(color === green) { <GreenComponent/>; }n }}n </div>n

transform-function-bind

這一塊是動態this綁定的語法糖 在react的事件場景或者改變this的場景，語法非常簡潔。

const box = {n weight: 2,n getWeight() { return this.weight; },n }; n console.log(box.getWeight()); // prints 2n console.log({ weight: 10 }::box.getWeight()); // prints 10n

結語

stage-x是babel根據proposal做的語法transformer. 這邊摘錄下babel官方的文檔說明。

stage-0 - Strawman: just an idea, possible Babel plugin.

stage-1 - Proposal: this is worth working on.

stage-2 - Draft: initial spec.

stage-3 - Candidate: complete spec and initial browser implementations.

stage-4 - Finished: will be added to the next yearly release.

完。

ps： 小小吐槽知乎的編輯器體驗

參考資料

babel插件官方鏈接阮一峰ES6入門

本文首發於作者的github blog