Highcharts Export Server兼容ES6特性：语法报错及转译故障求解

我正在使用Highcharts Stock与Highcharts Export Server，常规功能使用正常，但在代码中使用箭头函数、反引号字符串插值、CSS.escape这三种JS语法时，Export Server无法生成图片。

• 已升级至Node 18.7.0与NPM 8.15.0，当前Export Server版本为v2.1.0，问题仍未解决
• 仅Export Server出现该问题，Chrome浏览器中运行完全正常
• 尝试用Babel将代码转译为旧版JS时，又出现三类错误：Unexpected token 'const'、ReferenceError: Can't find variable: require、SyntaxError: Unexpected token '.'

需要解答以下问题：

1. 该问题源于Node、NPM还是Highcharts？为何不支持现代JS？
2. 如何更新以兼容现代JS？
3. 转译后的代码为何报错？

附问题复现信息：包含chart.json配置文件、annotate.js回调脚本及执行命令，取消annotate.js中CSS.escape代码的注释后，图片生成失败。

1. 问题根源与不支持现代JS的原因 #

问题根源在Highcharts Export Server v2.1.0，和Node/NPM版本无关。
Export Server v2.x底层依赖PhantomJS作为渲染引擎，而PhantomJS的JS内核基于旧版WebKit（近似Chrome 49版本），对ES6+的现代JS语法支持极有限——箭头函数、模板字符串（反引号插值）、CSS.escape这些都是ES6及之后的特性，PhantomJS内核无法识别，直接导致渲染失败。
你本地Node是18.x，但Export Server并没有用Node直接执行你的回调脚本，而是通过PhantomJS的沙箱环境运行，所以升级Node版本根本解决不了问题。

2. 兼容现代JS的解决方案 #

有两种可行方案：

• 升级到Highcharts Export Server v3.x及以上版本：v3.x已经弃用PhantomJS，改用Puppeteer（基于Chrome/Chromium）作为渲染引擎，完全支持ES6+现代JS语法，和浏览器环境兼容性一致。直接卸载旧版本安装最新稳定版即可：

  npm uninstall highcharts-export-server -g
  npm install highcharts-export-server -g
  

• 继续使用v2.x时预转译代码：如果暂时无法升级，需要把使用现代语法的回调脚本完整转译为PhantomJS支持的ES5语法，注意要处理所有ES6+特性，比如CSS.escape需要用polyfill替代。

3. 转译后报错的原因 #

你用Babel转译时出现的三类错误，都是转译配置不当导致的：

• Unexpected token 'const'：大概率是Babel没配置正确的目标环境，或者没启用const转var的规则（虽然const是ES6，但PhantomJS部分版本对其支持有问题，必须转译）
• ReferenceError: Can't find variable: require：PhantomJS的沙箱环境不支持Node.js的require模块系统，转译时如果引入了Node相关模块语法，或者Babel配置了CommonJS模块输出，就会触发这个错误，要确保代码是纯浏览器端的，不依赖Node模块
• SyntaxError: Unexpected token '.'：通常是转译时没处理可选链操作符（?.）这类ES2020+语法，或者转译插件不全，需要补充对应插件（比如@babel/plugin-proposal-optional-chaining）并把目标环境配置为PhantomJS支持的版本

内容的提问来源于stack exchange，提问作者B Seven