阅读 929

配置 babel 支持对象扩展运算符、class 直接赋值变量等新特性

例如支持对象扩展运算符

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:

评论