javascript - React 代码中出现意外的 Webpack 语法错误 "::"

Question

我正在尝试集成this react swipe module on github 。一切都很顺利，直到我开始集成 refs进入我的代码。我正在尝试从 onClick 调用 react 函数。这是code snippet我正在工作:

class Page extends Component {
    next() {
        this.refs.reactSwipe.next();
    }

    prev() {
        this.refs.reactSwipe.prev();
    }

    render() {
        return (
            <div className="center">
                <h1>ReactSwipe.js</h1>
                <h2>Open this page from a mobile device (real or emulated).</h2>
                <h2>You can pass <a href="https://github.com/voronianski/swipe-js-iso#config-options">Swipe.js options</a> as query params.</h2>

                <ReactSwipe ref="reactSwipe" className="mySwipe" swipeOptions={swipeOptions}>
                    {paneNodes}
                </ReactSwipe>

                <div>
                    <button type="button" onClick={::this.prev}>Prev</button>
                    <button type="button" onClick={::this.next}>Next</button>
                </div>
            </div>
        );
    }
}

问题是 web pack 在 : 行上抛出 Module build failed: SyntaxError: Unexpected token :

<button type="button" onClick={::this.prev}>Prev</button>

我需要在 webpack 设置中添加什么设置才能允许此 ::？或者我如何在没有 :: 函数绑定(bind)的情况下从 html onClick 调用 React 函数？

Answer 1

逛完this blog post后我想通了。 :: 是 ES7 proposed shortcut ，并且需要告诉 babel 使用 ES7 的建议部分。

所以我安装了stage 0 preset from babel :

npm install babel-preset-stage-0 --save-dev

然后我更新了我的网络包以识别这一点:

module: {
  loaders: [
    {
      loader: "babel-loader",

      // Skip any files outside of your project's `src` directory
      include: [
        path.resolve(__dirname, "src"),
      ],

      // Only run `.js` and `.jsx` files through Babel
      test: /\.jsx?$/,

      // Options to configure babel with
      query: {
        presets: ['stage-0', 'react'],
      }
    },
  ]
}

其中的关键部分是这行:

presets: ['stage-0', 'react']