使用es6 react.js，Webpack构建失败

Question

我使用React.js，Webpack，... props语法，箭头函数。

当我运行“npm run build”时，我收到此错误：

来自UglifyJs的bundle.js中的错误 SyntaxError：意外的令牌punc«（»，预期的punc«：»[bundle.js：77854,15]

这是我的debug.log

我的webpack.config

如何成功运行构建？

我找到导致错误的行，这里是：

import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';

我不知道为什么。 ：（

没有它，我的所有ES6语法都可以正常工作和编译。

请帮助

Answer 1

如果您使用具有ES6语法的npm依赖项，则会发生此错误。它也与Preact一起发生在我身上（见https://github.com/developit/preact-compat/issues/155）。

您可以通过将依赖项显式添加到通过babel加载的模块来修复它，如下所示：

module: {
    rules: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            include: [
                srcPath,
                // we need to include preact-compat
                // otherwise uglify will fail
                // @see https://github.com/developit/preact-compat/issues/155
                path.resolve(__dirname, '../../../node_modules/preact-compat/src')
            ]
        }
    ]
}

Answer 2

在bundle.js，第77854行，第15个字符中，在对象属性名称后面有一个括号，而不是：。 必须有类似的东西：

{property () {}} 

而不是

{property : function () {}} 

编辑（感谢@handoncloud）：第一个是有效的ES6，是第二个的简写，在ES5中是等效的。

问题是，构建不完全支持ES6。

Answer 3

找到它。

React-Bootstrap-Table有一个名为React-Modal的依赖项。

我在npm install react-modal没有--save或--save-dev的情况下安装了React Modal。所以React-Modal没有列在我的package.json。

中

现在一切都好。

解决方案：npm install react-modal --save