Babel 6 预设选择让 babel 工作答案

【问题标题】：Babel 6 preset selection to get babel workingBabel 6 预设选择让 babel 工作
【发布时间】：2016-03-12 16:47:00
【问题描述】：

我将 babel 6 与 react 插件一起使用，并按照文档说明设置转译过程。我读过要反应工作我需要使用es2015 和反应preset。最初使用这两个预设一切正常。

但是当我从 babel 的 website （属性初始化器）复制示例代码时为了测试新的语言功能，我在转译下面的代码时遇到了错误，因此无法再转译代码。

// The ES6+ way
class Video extends React.Component {
    static defaultProps^= { // this is line 42 and ^ the column where error occurs
        autoPlay: false,
        maxLoops: 10,
    }

    static propTypes = {
        autoPlay: React.PropTypes.bool.isRequired,
        maxLoops: React.PropTypes.number.isRequired,
        posterFrameSrc: React.PropTypes.string.isRequired,
        videoSrc: React.PropTypes.string.isRequired,
    }

    state = {
        loopsRemaining: this.props.maxLoops,
    }
}

Warning: [...]components/sectorList.js: Unexpected token (42:24) Use --force to continue.

经过很长一段时间的调试，我通过加载 babel 的 stage-0 预设解决了这个问题。但这只是运气。

所以我找不到答案的问题是：

正确的方法是如何确定正确的预设集合。

或者是一个意外的标记...警告主要是缺少预设的通知？

感谢您的帮助

【问题讨论】：

标签： javascript ecmascript-6 babeljs ecmascript-2016

【解决方案1】：

如果您查看预设的 babel 页面，它会列出所有包含的转换。在这种情况下，您正在使用当前处于阶段 1 的类属性，因此包含在 stage 1 preset 中。

在 ES2015 中，您将使用构造函数来设置默认值。

【讨论】：

好的，我在 es-2015 旁边使用 stage-0 所做的工作可以使用预设进行转译，但无效？更多来自不同标准的组合？
es2015 是“下一个”标准，目前主流浏览器支持大约 80%。 stage-0 (-1, -2, -3) 是对未来发展的建议集合。我相信从第 0 阶段到达成一致的标准大约需要两年时间。所以es2015和stage-0并不矛盾。
感谢您的评论真的帮助我更好地了解 babel 是如何工作的。