破坏 npm 构建的依赖关系可能会将 ES6 代码带入 ES5 兼容的遗留构建中

Question

我正在开发一个旧的遗留项目，我必须向其中引入 Highcharts 库。由于它不适用于以前版本的 Canvas，我必须将其升级到。这两个更改工作了一段时间，但后来构建失败了，我认为我这边没有交互，但是由于我不是构建过程方面的专家，我可能在这里错了。我的

package.json

唯一的区别是：

dependencies: {
...
+    "highcharts": "^11.1.0",
+    "highcharts-react-official": "^3.2.0",
...
},
devDependencies: {
...
-    "canvas": "^1.3.1",
+    "canvas": "^2.11.2",
...
}

我遇到的错误是在产品构建期间发生的，同时缩小了这一行中的代码（至少我是这么认为的）：

var cmd = `mkdir -p build && NODE_PATH=${_node_path()} browserify ${_vendor_exports().join(' ')} | NODE_ENV=production envify | uglifyjs -c --keep-classnames --keep-fnames> ${vendor_bundle}`;
_execute(cmd, cb);

错误是这样的：

Error: Parse Error: Line 161191: Unexpected token .
    at throwError (/mnt/js/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2818:21)
    at throwUnexpected (/mnt/js/node_modules/jstransform/node_modules/esprima-fb/esprima.js:2880:9)
    at parsePrimaryExpression (/mnt/js/node_modules/jstransform/node_modules/esprima-fb/esprima.js:3592:9)
    at parseLeftHandSideExpressionAllowCall (/mnt/js/node_modules/jstransform/node_modules/esprima-fb/esprima.js:3682:61)
    at parsePostfixExpression (/mnt/js/node_modules/jstransform/node_modules/esprima-fb/esprima.js:3722:20)
    at parseUnaryExpression (/mnt/js/node_modules/jstransform/node_modules/esprima-fb/esprima.js:3789:16)
    at parseBinaryExpression (/mnt/js/node_modules/jstransform/node_modules/esprima-fb/esprima.js:3879:16)
    at parseConditionalExpression (/mnt/js/node_modules/jstransform/node_modules/esprima-fb/esprima.js:3939:16)
    at parseAssignmentExpression (/mnt/js/node_modules/jstransform/node_modules/esprima-fb/esprima.js:4192:16)
    at parseConditionalExpression (/mnt/js/node_modules/jstransform/node_modules/esprima-fb/esprima.js:3945:26)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build-vendor-prod: `node scripts.js build-vendor-prod`

[...]

Parse error at 0:13452,4201
:u,destroyObjectProperties:function(t,e,i){k(t,function(s,r){s!==e&&s?.destroy&&
                                                                      ^
ERROR: Unexpected token: punc (.)
    at JS_Parse_Error.get (eval at <anonymous> (/mnt/js/node_modules/uglify-es/tools/node.js:21:1), <anonymous>:75:23)
    at fatal (/mnt/js/node_modules/uglify-es/bin/uglifyjs:300:53)
    at run (/mnt/js/node_modules/uglify-es/bin/uglifyjs:239:9)
    at Socket.<anonymous> (/mnt/js/node_modules/uglify-es/bin/uglifyjs:177:9)
    at Socket.emit (events.js:187:15)
    at endReadableNT (_stream_readable.js:1094:12)
    at process._tickCallback (internal/process/next_tick.js:63:19

您能否帮我提供直接的解决方案，或者至少提供一个如何解决该问题的想法？

Answer 1

好吧，最终这是 Highcharts 在代码中引入可选链接的问题，这对于

envify

或

uglifyjs

来说都是一个问题（browserify 也在开发版本中使用，所以我认为它不会导致任何问题）。

这条线帮助最大：

Parse error at 0:13452,4201
:u,destroyObjectProperties:function(t,e,i){k(t,function(s,r){s!==e&&s?.destroy&&

当我克隆 Highcharts 存储库时，找到了该行并发现它或多或少是在我的构建停止工作时提交的。为了解决这个问题，我已降级到 Highcharts v10.3.3，甚至在其

ts/README.md

文件中指定不使用可选链接。

这并不能修复我的构建，因为它仍然与 ES2020+ 代码不兼容（我认为它与 ES6 不兼容），但至少这是解决我的问题的解决方案。