浏览器化后反应路由器动画获得意外令牌答案

【问题标题】：React router animation getting unexpected token after browserify浏览器化后反应路由器动画获得意外令牌
【发布时间】：2015-11-13 10:14:16
【问题描述】：

我正在尝试通过react-router 实现pages transitions animation。在我用browserify/babel 编译我的代码后，我在这一行得到'unexpected token'：static contextTypes = {，箭头指向= 符号下方。

我完全从docs 复制/粘贴了代码，我不明白出了什么问题。

【问题讨论】：

标签： javascript reactjs transition single-page-application react-router

【解决方案1】：

static关键字是一个提议的es7特性，需要添加babel的stage-0预设：https://github.com/babel/babel/tree/master/packages/babel-preset-stage-0

或者你也可以在课后做生意：

class RouteCSSTransitionGroup extends React.Component {
...
}

RouteCSSTransitionGroup.contextTypes = {
  location: React.PropTypes.object
}

【讨论】：

谢谢你，我已经尝试了你的两种解决方案，但现在我在<ReactCSSTransitionGroup {...props}> 上有另一个意外标记，这次箭头指向 ReactCSSTransitionGroup 的打开标签<
@LucaMormile 听起来您的 jsx 转换不起作用 - 您还需要 es2015 和 react 预设 babeljs.io/docs/plugins
也只是我的看法，但 webpack 比 browserify 好得多（增量编译速度快 15 倍）
我肯定会看到 webpack，如果你允许我想展示我的 CLI 脚本来编译：browserify main.jsx -o public/js/bundle.js -t [ babelify - -presets stage-0 [es2015 react]]
看起来不错，但我不是浏览器专家，阶段 0 应该放在方括号内，即--presets [ stage-0 es2015 react ]。另外我假设您安装了其他预设，即npm i babel-preset-react babel-preset-react。当我上次尝试让 stage-0 与其他预设一起工作时出现了一个问题，但是 react 和 es2015 应该可以很好地协同工作

【解决方案2】：

npm install --save-dev babel-loader

npm install --save-dev babel-core babel-preset-es2015 babel-preset-react

npm install --save-dev babel-preset-stage-0 babel-preset-stage-1 babel-preset-stage-2 babel-preset-stage-3

和：

 query:{
        presets:['es2015','react','stage-0','stage-1','stage-2','stage-3']
      }

【讨论】：