配置 babel 支援物件擴充套件運算子、class 直接賦值變數等新特性

qq20004604發表於2018-02-14
Babel物件套件賦值變數

例如支援物件擴充套件運算子

let foo = {
    a: 1,
    b: 2
}

let bar = {c: 3, ...foo}
複製程式碼

或者支援 class 裡直接賦值變數

class Foo extends React.Component {
    state = {
        a: 1
    }

    render() {
        return (<div>a: {this.state.a}</div>)
    }
}
複製程式碼

一般來說，這種新特性，正常來說 runtime 是不支援的，因此額外安裝下面這個

npm install --save babel-preset-stage-2
複製程式碼

然後配置 .babelrc 檔案：

{
  "presets": [
    "babel-preset-env",
    "stage-2"
  ],
  "plugins": [
    "transform-runtime"
  ]
}
複製程式碼

即可。

注：

  1. 通常安裝到 stage-2 就足夠了，如果還不行，再安裝 stage-1 或者 stage-0 （越小越新）；
  2. 安裝這個對體積影響不大，我自己在 React 專案裡測試，新增了上面兩段程式碼後，並新增 "stage-2" 配置，體積大約增加了 2KB；

DEMO：

相關文章