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

回答

相關問題