javascript - 使用 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

如何运行构建成功？

---

我找到了导致错误的行，在这里:

从 'react-bootstrap-table' 导入 { BootstrapTable, TableHeaderColumn };

我不知道为什么。 :(

没有它，我所有的 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')
            ]
        }
    ]
}