Javascript 使用es6 react.js生成网页包失败

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

当我运行“npm运行构建”时，我得到以下错误：

UglifyJs中bundle.js中的错误 语法错误：意外的令牌punc«（»，预期的punc«：»[bundle.js:77854,15]

这是我的

debug.log

我的

webpack.config

如何成功运行构建

---

我找到了导致错误的代码行，如下所示：

从'react bootstrap table'导入{BootstrapTable，TableHeaderColumn}；

我不知道为什么(

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

---

请提供任何帮助

在

bundle.js

第77854行，字符15中，对象属性名称后面有一个括号，而不是：。 一定有这样的东西：

{property () {}} 

而不是

{property : function () {}} 

编辑（由于@handconlud）：第一个是有效的ES6，是第二个的缩写，这在ES5中是等效的

---

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

如果使用具有ES6语法的npm依赖项，则会发生此错误。我也遇到了Preact（请参阅）

您可以通过将依赖项显式添加到通过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')
            ]
        }
    ]
}

找到了

React引导表具有名为React Modal的依赖项

我通过

npm安装React model

安装了React model，但没有

--save

或

--save dev

。因此React model没有列在我的

包.json

中

现在一切都好了

---

解决方案：

npm安装反应模式--保存

如果您试图使用UglifyJS2压缩捆绑包输出文件，可能是它不支持ES6…您可以使用手动压缩（看起来此压缩程序单独使用ES6压缩程序；检查ECMAScript 2016（实验性）（可选）还有，你是在用babel缩小捆绑包吗？我从来没有用过它：v，但它可能支持ES6，还有一些相关的问题我是一个Webpack的新手。我真的不明白这一点。我遵循了一个教程，做了一些反应，现在我尝试构建，但不起作用。但是编译开发捆绑包的--watch命令工作得很好。找到了它。我认为它是从我是React-Modal插件：（bundle.js）-（React-Modal.js）但是如何解决呢？这不是我的代码。我只是用webpack编译它…

{property（）{}

在ES6中是有效的，仅供参考（在对象表达式中，而不是块语句中）.这是速记method@Steffi你说的是

removePotal

？也许Babel正试图将该输入压缩为ES5或更低版本。这在ES5中完全有效。是的。如果ES6不受支持，那么就用常规函数语法定义它。谢谢大家，我更了解，那么解决方案是什么？哦！是的，好的！看起来不错，但在m中y案例需要添加到include中的依赖项是什么？@Steffi babel loaderno，babel loader未包含在捆绑包中。请查看依赖项的package.json文件，如果它们具有属性“jsnext:main”，您需要通过babel显式运行它们，以便Uglifywork@handoncloud我不是瞎子，babel加载器在webpack配置中，但它不包含在捆绑包中。我说的是显式配置babel加载器以包含来自node_模块的包，该包具有jsnext:main属性。目前，Steffi只运行她自己的包babel loader的源代码通过babel loader查找要通过babel loader加载的模块。检查每个依赖项的package.json，看看它是否有属性jsnext:main