Webpack構建因es6 react.js而失敗

Question

我使用React.js，Webpack，... props語法，箭頭函數。

當我運行“ npm run build”時，出現此錯誤：

UglifyJs SyntaxError中的bundle.js中出現錯誤：意外的標記點«（»，預期的點«：»[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