babel配置 各階段的stage的區別

2021-08-14 15:47:00 字數 3745 閱讀 2253

由於各大瀏覽器並對es6的並沒有完成支援,我們開發前端專案時需要使用babel來將es6**編譯為es5。 配置.babelrc檔案時一般配置為如下:

這個配置檔案的意思。首先,這個配置檔案是針對babel 6的。babel 6做了一系列模組化,不像babel 5一樣把所有的內容都載入。

如果需要編譯es6,我們需要設定presets包含es2015,也就是預先載入es6編譯的模組。

如果需要編譯jsx,我們需要設定presets包含react,也就是預先載入react編譯的模組。

如果需要編譯es7,我們需要設定presets包含stage-0,也就是預先載入es7編譯的模組。

es7不同階段語法提案的轉碼規則模組(共有4個階段),分別是stage-0,stage-1,stage-2,stage-3。

stage-0的功能範圍最廣大,包含stage-1, stage-2以及stage-3的所有功能,同時還另外支援如下兩個功能外掛程式:

transform-do-expressions

這個外掛程式是為了方便在 jsx寫if/else表示式而提出的.

眾所周知,react中jsx對條件表示式支援的不是太好,你不能很方便的使用if/else表示式,要麼你使用三元表達,要麼用函式。例如你不能寫如下的**:

var

=react

.createclass(=

this

.props

;return

(<

divclassname

="parents"

>

elseif(

color

=='red'

)else}}

<

/div

> )}

})

而只能這麼寫,

var

=react

.createclass(=

this

.props

;const

getcoloredcomponent

=color

=>if(

color

==='red')if

(color

==='green')}

return

(<

divclassname

="parents"

>

<

/div

> )}

})

transform-function-bind

這個外掛程式其實就是提供過::這個操作符來方便快速切換上下文this

使用bind切換this**如下:

func1

.bind

(obj

)func2

.bind

(this

)

使用外掛程式後,改寫**如下:

obj

::func1

::func2

stage-1除了包含stage-2和stage-3,還包含了下面4個外掛程式:

transform-class-constructor-call

這個模組已經廢棄,不再使用了

transform-class-properties

這個外掛程式可以支援解釋如下**

class

bork

//static class properties

static

staticproperty

="babeliscool"

;static

staticfunction

=function

()}

transform-decorators

這個外掛程式可以使如下**

class

myclass

extends

component

}onchange

(){}

handlesubmit

(){}

}

通過使用autobind裝飾器,改寫為如下**

class

myclass

extends

component

@autobind

onchange

(){}

@autobind

handlesubmit

(){}

}

transform-export-extensions

這個外掛程式支援將如下**:

import*as

nsfrom

'mod'

export

default

nsimport

vfrom

'mod'

export

default

v

改寫為如下**:

export*as

nsfrom

'mod'

export

vfrom

'mod'

stage-2除了包含stage-3,還包含了下面2個外掛程式:

syntax-trailing-function-commas

這個外掛程式可以支援函式的最後乙個引數後面允許加逗號,**如下:

function

clownpuppieseverywhere

(param1

,param2

,// 最後乙個引數加逗號,以方便增加後面乙個引數,以及優化源**管理

)

transform-object-reset-spread

這個外掛程式支援解釋擴充套件運算子,**如下:

let=;

console

.log(x

);// 1

console

.log(y

);// 2

console

.log(z

);//

stage-3包含了下面2個外掛程式:

transform-async-to-generator

這個外掛程式用來支援es7中的async和await,**如下:

const

sleep=(

timeout

)=>)}

(async

()=>

)()

transform-exponentiation-operator

這個外掛程式可以支援**操作符進行冪操作,**如下:

let

squared=2

**2;// same as: 2 * 2

letcubed=2

**3;// same as: 2 * 2 * 2

PIPE各階段的實現

1.pc選擇和取指階段 這個階段必須選擇程式計數器pc的當前值,並且 下乙個pc值。pc選擇邏輯從三個程式計數器源中進行選擇。當一條 錯誤的分支進入訪存階段時,會從流水線暫存器m 訊號m vala 中讀出該指令valp的值 指明下一條指令的位址 當ret指令進入寫回階段時,會從流水線暫存器w 訊號w...

測試各階段的check List

常用測試checklist,可繼續補充 迭代測試前checklist 檢查時間 檢查人序號 內容檢查結果 1提前確定測試範圍以及提交測試包的時間和方式 2評估工作量,確定測試週期,確定測試重點以及測試策略 3安排測試計畫,並郵件發出 4根據測試內容,準備測試環境和測試資料 5跟蹤測試包提交時間 測試...

測試與開發各階段的關係

測試與開發各階段的關係 測試之旅 測試應該從生命週期的第乙個階段開始,並且貫穿於整個軟體開發的生命週期。生命週期測試是對解決方案的持續測試,即使在軟體開發計畫完成後或者被測試的系統處於執行狀態的時候,都不能中斷測試。在開發過程中的幾個時期,測試團隊所進行的測試是為了盡早發現系統中存在的缺陷。軟體的開...