Webpack构建失败，es6 react.js

我使用React.js，Webpack，... props语法，箭头函数。Webpack构建失败，es6 react.js

当我运行 “故宫运行编译”，我得到这个错误：

ERROR从UglifyJs 的SyntaxError bundle.js：意外令牌PUNC«（»，预计PUNC«：»[bundle.js： 77854,15]

这是我debug.log

我webpack.config

如何成功运行构建？

我发现这会导致错误的路线，这就是：

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

我不知道为什么。 :(

没有它，我所有的ES6语法的作品，没有任何错误编译。

任何帮助，请

来源

2017-03-05 Steffi

如果你想捆输出文件与压缩UglifyJS2它可能是，它不支持ES6 ... – Hydro

你可以以https手动压缩它：// jscompress .com /虽然（它看起来像这个压缩机是单独使用ES6压缩机;检查ECMAScript 2016（实验性）选项） – Hydro

另外，你是否用babel缩小了捆绑包？我从来没有使用它：v，但它可能支持ES6，并且有一些相关的问题 – Hydro

发现了它。

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

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

现在一切正常。

SOLUTION：npm install react-modal --save

来源

2017-03-06 10:54:24 Steffi

在bundle.js，行77854，字符15，有一个对象的属性名后parenthese，而不是：必须有这样的：

{property() {}}

，而不是

{property : function() {}}

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

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

来源

2017-03-05 12:31:53

找到了。我认为它来自React-Modal插件：http://i.imgur.com/uXYeBNr.png（bundle.js） - http://i.imgur.com/kvXZLw6.png（react-modal.js）但是如何解决？这不是我的代码。我只是用webpack编译它...... – Steffi

'{property（）{}}'在ES6中是有效的，只是fyi（在一个对象表达式中，而不是在block语句中）。这是一种速记方法 – Hydro

谢谢，所以我理解代码。 –

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

您可以通过显式的增加依赖于通过通天装，像这样的模块解决它：

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') 
      ] 
     } 
    ] 
}

来源

2017-03-05 13:23:49

，您可能需要ES6 polyfill哦！好的！它看起来不错，但在我的情况下，需要在include中添加哪些依赖项？ – Steffi

@Steffi babel-loader – Hydro

不，捆绑包中不包含babel-loader。查看你的依赖关系的package.json文件，如果他们有一个属性“jsnext：main”，你需要通过babel明确地运行它们以使Uglify工作 –

Webpack构建失败，es6 react.js

回答

相关问题