配置 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：

• 示例配置文件（包含支持React）
• babel-loader 的用法和 DEMO

转载于:https://juejin.im/post/5a844bc36fb9a063577501a4