从 UglifyJS 创建块时意外的标记 punc «(»，预期的 punc
Posted
技术标签:
【中文标题】从 UglifyJS 创建块时意外的标记 punc «(»，预期的 punc【英文标题】：Unexpected token punc «(», expected punc when creating chunk from UglifyJS 【发布时间】：2017-07-26 19:12:39 【问题描述】：尝试使用 webpack 2.2.1 进行生产构建时出现以下错误：
> cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress
Hash: 7bb2cdb98aab2f36f7e1
Version: webpack 2.2.1
Time: 259158ms
Asset Size Chunks Chunk Names
39.1ac14d04bb54ae025fbd.chunk.js 575 kB 39 [emitted] [big]
.htaccess 1.53 kB [emitted]
manifest.json 624 bytes [emitted]
0.b0881f3ea995a2fc465f.chunk.js 600 kB 0 [emitted] [big]
1.350b2d8a46d91e3c0911.chunk.js 918 kB 1 [emitted] [big]
2.e52c43dc81bf586e8812.chunk.js 636 kB 2 [emitted] [big]
3.c7b3f0e5477649c6c9d3.chunk.js 646 kB 3 [emitted] [big]
4.8ce7dfe0860e39ae2456.chunk.js 631 kB 4 [emitted] [big]
5.d78c86c5b48b1b431c01.chunk.js 632 kB 5 [emitted] [big]
6.9f79d2c5fa73cb97cc74.chunk.js 630 kB 6 [emitted] [big]
7.3a675854451d716221c2.chunk.js 649 kB 7 [emitted] [big]
8.5f09ba293a356e88feab.chunk.js 627 kB 8 [emitted] [big]
9.edc7562575e48e9bce12.chunk.js 642 kB 9 [emitted] [big]
10.4a4bb6e69f6d7255d6ca.chunk.js 632 kB 10 [emitted] [big]
11.f5b5e0d36957300688bb.chunk.js 655 kB 11 [emitted] [big]
12.d2f74bd43695364d6e84.chunk.js 645 kB 12 [emitted] [big]
13.ab88bb5c89848d464643.chunk.js 628 kB 13 [emitted] [big]
14.cde57af54e53f5fa794f.chunk.js 626 kB 14 [emitted] [big]
15.df611a46991bdba9f78f.chunk.js 626 kB 15 [emitted] [big]
16.22d8ed2fc86438543bca.chunk.js 707 kB 16 [emitted] [big]
17.432aca8b104eb242add1.chunk.js 666 kB 17 [emitted] [big]
18.0c86d3404ce0d14653b2.chunk.js 650 kB 18 [emitted] [big]
19.d7636acc74397167013d.chunk.js 627 kB 19 [emitted] [big]
20.c3c519d8882f810910a6.chunk.js 632 kB 20 [emitted] [big]
21.fd6ec98dac51c188c629.chunk.js 708 kB 21 [emitted] [big]
22.200e5f939f77900a2f2f.chunk.js 643 kB 22 [emitted] [big]
23.393d2400f3a4357f1c2d.chunk.js 628 kB 23 [emitted] [big]
24.1c21a605f12ff9ff2fa7.chunk.js 634 kB 24 [emitted] [big]
25.5f5e33f51fe307545c6b.chunk.js 631 kB 25 [emitted] [big]
26.92502f109e3d6e616332.chunk.js 634 kB 26 [emitted] [big]
27.5d1ea5d6ebae15b96769.chunk.js 580 kB 27 [emitted] [big]
28.d571ed979e55c69096c2.chunk.js 579 kB 28 [emitted] [big]
29.c74d3346aca8532faf08.chunk.js 578 kB 29 [emitted] [big]
30.a35f7487c1c559c7f5d7.chunk.js 579 kB 30 [emitted] [big]
31.dc58b8286da5cbfefea3.chunk.js 567 kB 31 [emitted] [big]
32.6c32f4f35f9cda5c3938.chunk.js 587 kB 32 [emitted] [big]
33.ca86ec92b1a188a9c8e6.chunk.js 598 kB 33 [emitted] [big]
34.73c3e986500f888a12f5.chunk.js 571 kB 34 [emitted] [big]
35.59e71f89d6afcb9932bf.chunk.js 575 kB 35 [emitted] [big]
36.6285ac7b1164d4b53fc9.chunk.js 596 kB 36 [emitted] [big]
37.c301c304dd0bada883df.chunk.js 601 kB 37 [emitted] [big]
38.843bd7f01b202ca4d1bf.chunk.js 590 kB 38 [emitted] [big]
favicon.ico 67.3 kB [emitted]
40.db40e1c52ff3bad0bb78.chunk.js 586 kB 40 [emitted] [big]
41.cea7167bc8d0015ce8a3.chunk.js 576 kB 41 [emitted] [big]
42.4da525baabf2a11ff762.chunk.js 615 kB 42 [emitted] [big]
43.10dd5cb77bd71053c86a.chunk.js 569 kB 43 [emitted] [big]
44.dd2089c95eff121ed148.chunk.js 572 kB 44 [emitted] [big]
45.735f9eb7b75a9e0d5e3c.chunk.js 570 kB 45 [emitted] [big]
46.c691a6442ef58163ecb2.chunk.js 583 kB 46 [emitted] [big]
47.0bfb099e1d1bd4edff39.chunk.js 566 kB 47 [emitted] [big]
48.5ba43bcc43c12ecb8e4e.chunk.js 82.6 kB 48 [emitted]
49.5a8172a8a9ef896cb1f5.chunk.js 35.5 kB 49 [emitted]
50.0e982f73a5beb9ccad3a.chunk.js 36.3 kB 50 [emitted]
51.8ab7ac85d02819586dc1.chunk.js 46.3 kB 51 [emitted]
52.c8f155d9cef8f9f2937d.chunk.js 79.6 kB 52 [emitted]
53.36c2fad479bf35b0d1f1.chunk.js 37.4 kB 53 [emitted]
54.63e68a1593ab8ee4f2c6.chunk.js 36.3 kB 54 [emitted]
55.8f657b8fdc6163d0550b.chunk.js 42.4 kB 55 [emitted]
56.2a4cab26835a307d9468.chunk.js 35 kB 56 [emitted]
57.ec95d3459dd932a74352.chunk.js 38.9 kB 57 [emitted]
58.5e4c7da441e6c3244e25.chunk.js 18.2 kB 58 [emitted]
59.50524fa7662caade7171.chunk.js 41.2 kB 59 [emitted]
60.04694585a84e27f4b4a2.chunk.js 4.02 kB 60 [emitted]
61.f532c12ec94650a77c36.chunk.js 4.11 kB 61 [emitted]
62.0f7e16b18f11e6104300.chunk.js 4.91 kB 62 [emitted]
63.04cd26a9cc98f6d2e251.chunk.js 4.86 kB 63 [emitted]
64.28e531e8f67544ae8bb4.chunk.js 3.69 kB 64 [emitted]
65.c6d529e00cc2f02d298d.chunk.js 4.11 kB 65 [emitted]
66.9cd0049cdf2fae8311ac.chunk.js 6.84 kB 66 [emitted]
67.8d860ceb8cfd8afec941.chunk.js 10.1 kB 67 [emitted]
68.d511e394e401edc4742a.chunk.js 5.86 kB 68 [emitted]
69.552c985835c018f52e83.chunk.js 12.4 kB 69 [emitted]
70.f855bd5800a4d71c9e47.chunk.js 7.7 kB 70 [emitted]
71.692364c8d68e9689e36c.chunk.js 24.1 kB 71 [emitted]
72.38336d6626d6def72d84.chunk.js 24.4 kB 72 [emitted]
73.b039a0a0b71d6645c37a.chunk.js 8.45 kB 73 [emitted]
74.38e2ce6ee4774d0ce704.chunk.js 3.65 kB 74 [emitted]
75.fd7b46e332d33698b270.chunk.js 6.4 kB 75 [emitted]
76.6d6cf7ed17606711ae18.chunk.js 4.96 kB 76 [emitted]
77.ebdbafe3da683a49d201.chunk.js 8.08 kB 77 [emitted]
main.89765ef68e927cffc5d6.js 1.41 MB 78 [emitted] [big] main
index.html 643 bytes [emitted]
sw.js 24.3 kB [emitted]
[./app/app.js] ./app/app.js 11.9 kB 78 [built]
[./app/containers/App/index.js] ./app/containers/App/index.js 7.38 kB 78 [built]
[./app/containers/App/selectors.js] ./app/containers/App/selectors.js 1.87 kB 78 [built]
[./app/containers/LanguageProvider/index.js] ./app/containers/LanguageProvider/index.js 7.01 kB 78 [built]
[./app/global-styles.js] ./app/global-styles.js 786 bytes 78 [built]
[./app/i18n.js] ./app/i18n.js 2.98 kB 78 [built]
[./app/routes.js] ./app/routes.js 26.9 kB 78 [built]
[./app/store.js] ./app/store.js 3.01 kB 78 [built]
[./node_modules/babel-polyfill/lib/index.js] ./~/babel-polyfill/lib/index.js 833 bytes 78 [built]
[./node_modules/intl/locale-data/jsonp/en.js] ./~/intl/locale-data/jsonp/en.js 24 kB 71 [built]
[1] multi ./app/app.js 28 bytes 78 [built]
[./node_modules/react-dom/index.js] ./~/react-dom/index.js 59 bytes 78 [built]
[./node_modules/react-redux/lib/index.js] ./~/react-redux/lib/index.js 475 bytes 78 [built]
[./node_modules/react-router-redux/lib/index.js] ./~/react-router-redux/lib/index.js 1.97 kB 78 [built]
[./node_modules/sanitize.css/sanitize.css] ./~/sanitize.css/sanitize.css 856 bytes 78 [built]
+ 1207 hidden modules
ERROR in 1.350b2d8a46d91e3c0911.chunk.js from UglifyJs
Unexpected token punc «(», expected punc «:» [1.350b2d8a46d91e3c0911.chunk.js:20075,15]
Child html-webpack-plugin for "index.html":
[./node_modules/html-webpack-plugin/lib/loader.js!./app/index.html] ./~/html-webpack-plugin/lib/loader.js!./app/index.html 588 bytes 0 [built]
Child __offline_serviceworker:
[./node_modules/exports-loader/index.js?self.fetch!./node_modules/whatwg-fetch/fetch.js] ./~/exports-loader?self.fetch!./~/whatwg-fetch/fetch.js 12.6 kB 0 [built]
[./node_modules/offline-plugin/empty-entry.js] ./~/offline-plugin/empty-entry.js 0 bytes 0 [built]
[./node_modules/offline-plugin/lib/misc/sw-loader.js?json=%7B%22data_var_name%22%3A%22__wpo%22%2C%22loaders%22%3A%5B%5D%2C%22cacheMaps%22%3A%5B%5D%7D!./node_modules/offline-plugin/empty-entry.js] ./~/offline-plugin/lib/misc/sw-loader.js?json=%7B%22data_var_name%22%3A%22__wpo%22%2C%22loaders%22%3A%5B%5D%2C%22cacheMaps%22%3A%5B%5D%7D!./~/offline-plugin/empty-entry.js 16.2 kB 0 [built]
npm ERR! Linux 3.16.0-4-amd64
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v7.2.0
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! docs-bootstrap-styled@0.5.0 build: `cross-env NODE_ENV=production webpack --config internals/webpack/webpack.prod.babel.js --color -p --progress`
npm ERR! Exit status 2
我真的不知道我的代码是从哪里来的。经过一个月的非 tdd 开发，我刚刚修复了所有单元测试。
有没有办法诊断这个？
【问题讨论】：
我在安装 lodash 后遇到了同样的问题，我不得不暂时删除new webpack.optimize.UglifyJsPlugin
【参考方案1】：
对于 ES6+，您可以使用 uglify-es 代替 uglify-js，它正在开发中。
【讨论】：
【参考方案2】：在.babelrc 中将预设从es2015 更改为env 已为我解决了这个问题。 Babel 将 babel-preset-es2015 更改为 babel-preset-env。查看此链接 - http://babeljs.io/env
"presets": [
- "es2015",
+ "env",
"react"
],
【讨论】：
【参考方案3】：意外的标记符号«(»，预期的符号«:»
错误表明它需要一个冒号而不是左括号，所以问题可能与这样的函数声明有关：
var foo =
bar()
console.log('Something');
这需要改成
var foo =
bar: function()
console.log('Something');
【讨论】：
【参考方案4】：UglifyJs 不支持 ES6。该错误很可能是方法简写语法。例如：
const obj =
method()
// ...
;
当它看到左括号时，它期望的是一个冒号，如下所示：
const obj =
method: function()
// ...
;
有没有办法诊断？
它会告诉您块中的确切行，所以请看一下。在您发布的错误消息中是：
[1.350b2d8a46d91e3c0911.chunk.js:20075,15]
^ ^ ^
filename line column
然后您可以简单地在您的项目中搜索您看到的标识符。如果您不想搜索整个项目，可以使用 --display-chunks 标志运行 webpack。这将显示各个块中包含哪些模块，因此您只需要查看这些模块。
您可以告诉 babel 使用 babel 插件 transform-es2015-shorthand-properties 转换简写语法，而不必替换所有简写语法。
郑重声明：单元测试不会发现此类错误。
【讨论】：
以上是关于从 UglifyJS 创建块时意外的标记 punc «(»，预期的 punc的主要内容，如果未能解决你的问题，请参考以下文章
webpack 打包压缩 ES6文件报错UglifyJs + Unexpected token punc «(», expected punc «:»(示例代码
UglifyJS 抛出意外的标记：keyword (const) with node_modules
vue+element-ui build 出现 UglifyJs Unexpected token: punc 问题
vue+element-ui打包时候出现 UglifyJs Unexpected token: punc
webpack 打包压缩 ES6文件报错UglifyJs + Unexpected token punc (();
Ionic2 Typescript 设备构建错误'uglifyjs failed: SyntaxError: Unexpected token operator «=», expected punc