Webpack构build失败，es6 react.js

我使用React.js，Webpack，…道具语法，箭头函数。

当我运行“npm运行构build”，我得到这个错误：

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

这是我的debug.log

我的webpack.config

如何成功运行构build？

---

我find了导致bug的那一行，这里是：

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中的等价物。

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

Answer 3

find了。

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

我通过npm install react-modal安装了React Modal，没有--save或--save-dev 。 所以React-Modal并没有在我的package.json列出。

现在一切正常。

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