Javascript 使用es6 react.js生成网页包失败
我使用React.js、Webpack、…道具语法、箭头函数 当我运行“npm运行构建”时,我得到以下错误: UglifyJs中bundle.js中的错误 语法错误:意外的令牌punc«(»,预期的punc«:»[bundle.js:77854,15] 这是我的Javascript 使用es6 react.js生成网页包失败,javascript,node.js,reactjs,npm,webpack,Javascript,Node.js,Reactjs,Npm,Webpack,我使用React.js、Webpack、…道具语法、箭头函数 当我运行“npm运行构建”时,我得到以下错误: UglifyJs中bundle.js中的错误 语法错误:意外的令牌punc«(»,预期的punc«:»[bundle.js:77854,15] 这是我的debug.log 我的webpack.config 如何成功运行构建 我找到了导致错误的代码行,如下所示: 从'react bootstrap table'导入{BootstrapTable,TableHeaderColumn};
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