javascript - 从 UglifyJS 创建 block 时意外的标记 punc «(»，预期的 punc

Question

尝试使用 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 开发，我刚刚修复了所有单元测试。

有没有办法诊断？

Answer 1

UglifyJs 不支持 ES6。该错误很可能是方法简写语法。例如:

const obj = {
  method() {
    // ...
  }
};

当它看到左括号时，它期望的是一个冒号，如下所示:

const obj = {
  method: function() {
    // ...
  }
};

Is there a way to diagnosis this ?

它会告诉您 block 中的确切行，所以请看一下。在您发布的错误消息中是:

[1.350b2d8a46d91e3c0911.chunk.js:20075,15]
             ^                     ^    ^
         filename                line  column

然后您可以简单地在您的项目中搜索您看到的标识符。如果您不想搜索整个项目，可以使用 --display-chunks 标志运行 webpack。这将显示各个 block 中包含哪些模块，因此您只需要查看这些。

你可以告诉 babel 用 babel 插件 transform-es2015-shorthand-properties 转换简写语法，而不用替换所有的简写语法。 .

郑重声明:单元测试不会发现此类错误。