Question

我有一个非常基本的项目，用于启用Webpack的ES6的React。这是我的Webpack配置文件的样子：

module.exports = {
    entry: './main.js',
    output: {
        path: './',
        filename: 'index.js',
    },
    devServer: {
        inline: true,
        port: 3333,
    },
    module: {
        loaders: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    }
};

我有一些使用class声明的组件的React代码，该组件中有一些箭头函数。当我运行该页面时，Webpack dev服务器显示以下错误：

ERROR in ./App.js
Module build failed: SyntaxError: C:/Users/Alex/src/todo/App.js: Unexpected token (23:12)
  21 |  };
  22 |
> 23 |  handleOpen = () => {
     |             ^
  24 |          this.setState({open: true});
  25 |  };
  26 |

似乎从Babel网站上阅读，预设'es2015'应该足够了。我错过了什么吗？

Answer 1

此语法是ES Class Fields & Static Properties proposal的一部分，在撰写本文时仍处于第1阶段，因此您必须添加preset-stage-1才能使用它。

如果你使用stage-0，它也会起作用。

Alterantive，你可以只使用transform-class-properties plugin。

使用ES6预设的Webpack不了解ES6语法

1 个答案: