使用 es6 react.js 构建 Webpack 失败答案

【问题标题】：Webpack build fails with es6 react.js使用 es6 react.js 构建 Webpack 失败
【发布时间】：2017-07-25 07:04:24
【问题描述】：

我使用 React.js、Webpack、...props 语法、箭头函数。

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

来自 UglifyJs 的 bundle.js 中的错误 SyntaxError: Unexpected token punc «(», expected punc «:» [bundle.js:77854,15]

这是我的debug.log

我的webpack.config

如何成功运行构建？

我找到了导致错误的行，这里是：

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

我不知道为什么。 :(

没有它，我所有的 ES6 语法都可以正常工作，并且编译时没有任何错误。

请帮忙

【问题讨论】：

如果您尝试使用 UglifyJS2 压缩捆绑输出文件，可能是它不支持 ES6...
您可以使用 jscompress.com 手动压缩它（看起来这个压缩器正在单独使用 ES6 压缩器；请检查 ECMAScript 2016（实验）选项）
另外，你是用 babel 缩小包吗？我从没用过：v，但它可能支持 ES6 并且有一些相关的问题
我是 Webpack 的新手。我真的不明白这一点。我按照教程做了一些反应，现在我尝试构建但不起作用。但是编译 DEV 包的 --watch 命令效果很好。

标签： javascript node.js reactjs npm webpack

【解决方案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')
            ]
        }
    ]
}

【讨论】：

哦！好的！它看起来不错，但在我的情况下，需要在包含中添加什么依赖项？
@Steffi babel-loader
不，babel-loader 不包含在包中。查看你的依赖包的 package.json 文件，如果它们有一个属性“jsnext:main”，你需要通过 babel 显式运行它们才能使 Uglify 工作
@handoncloud 我不是盲人，babel-loader 在 webpack 配置中，但它不包含在包中。我说的是明确配置 babel-loader 以包含来自 node_modules 的具有 jsnext:main 属性的包。目前，Steffi 只通过 babel-loader 运行她自己的源代码
找出你必须包含哪个模块才能通过 babel-loader 加载。检查每个依赖的package.json，看是否有属性jsnext:main

【解决方案2】：

在bundle.js，第 77854 行，字符 15 中，对象属性名称后面有一个圆括号，而不是 :。必须有类似的东西：

{property () {}}

而不是

{property : function () {}}

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

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

【讨论】：

找到了。我认为它来自插件 React-Modal ：i.imgur.com/uXYeBNr.png (bundle.js) — i.imgur.com/kvXZLw6.png (react-modal.js) 但如何解决呢？这不是我的代码。我只是用 webpack 编译...
{property() {} } 在 ES6 中是有效的，仅供参考（在对象表达式中，而不是块语句中）。这是一种速记方法
@Steffi 你在说removePotal 吗？也许 Babel 正试图将该输入压缩为 ES5 或更低版本。这在 ES5 中是完全有效的。
如果不支持 ES6，那么只需使用常规函数语法定义即可。
谢谢大家，我明白了，那么解决办法是什么？

【解决方案3】：

找到了。

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

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

现在一切正常。

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

【讨论】：