无可用示例,如官方人员需要,我将提供完整编译后的小程序代码,供运行小程序复现用
经验证,通过配置vite.config.js的build中的minify属性,使发行为小程序时关闭代码压缩功能,同时开启manifest.json中的mp-weixin.setting.minified,由微信开发者工具代为压缩代码,可以规避此问题
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 5.26
第三方开发者工具版本号: v1.06.2210310
基础库版本号: 3.12.1
项目创建方式: HBuilderX
无可用示例,如官方人员需要,我将提供完整编译后的小程序代码,供运行小程序复现用
经验证,通过配置vite.config.js的build中的minify属性,使发行为小程序时关闭代码压缩功能,同时开启manifest.json中的mp-weixin.setting.minified,由微信开发者工具代为压缩代码,可以规避此问题
较大型的项目,或者某文件代码过大,就易出现该问题,本质是代码越多,越容易出现相同命名的代码
发行至小程序时,编译为es5语法,或es6语法中避免出现相同变量命名,亦或与运行时的代码无异,去除变量名压缩,将压缩功能交由微信小程序开发者工具实现
现阶段编译的产物,会出现变量遮蔽问题
由于发行到小程序的代码是压缩过的,变量名通常都是单个字母等简短命名,在es6环境下,一个大作用域下多个子作用域存在相同命名的变量是不会产生冲突的,但如果开启了es6转es5,则会因为let变成了var,进而导致变量遮蔽问题
uniapp发行的微信小程序,尤其vue3版本,编译的产物,是es6,甚至更高级的语法,故在微信开发者工具中,是必然要开启es6转es5的,故官方是否考虑编译发行时直接编译至es5语法,或者在es6语法下也保持无相同命名的变量,亦或将变量名压缩功能去除,交由微信开发者工具压缩,从根源上规避此类问题,二次压缩导致的Babel等工具在判断作用域等场景下出现bug是一个已知且无较好解决方案的问题
本人已在微信社区向官方咨询相关问题微信小程序es6转es5导致变量遮蔽的bug反馈
同时在附件中提供两张发行后的代码在微信开发者工具中实际运行,开启es6转es5时,源码与转移后的es5代码对比截图
欢迎到专业群( uni-app 官方技术交流群 1 ) 咨询,群中有相关专业的管理员和群友。
收到你的 bug 反馈,感谢你对 uni-app 的关注。以下从官方处理视角对这份反馈进行评审。
一、反馈内容完整性评审
标题与描述:清晰、专业。你准确描述了问题链条:发行产物压缩导致变量名缩短 → 微信开发者工具开启 es6 转 es5 时 let 转 var → 变量遮蔽。同时附上微信社区的反馈链接便于交叉验证,这部分做得较好。
代码示例:目前缺失。你表示“如官方人员需要,我将提供完整编译后的小程序代码”。完整项目排查成本较高,更有效的是最小化复现材料,例如:压缩前源码与压缩后产物的关键代码片段对比、es6 转 es5 前后的代码差异及具体报错信息。特别说明:我无法识别附件与截图,请将上述内容以文字形式直接贴出,或提供可公开访问的链接。
复现步骤:目前为“较大型的项目,或者某文件代码过大”,该条件过于宽泛,官方人员无法据此稳定复现。请补充:触发问题的代码结构特征(何种作用域嵌套与同名变量模式)、可复现的最小代码片段、以及稳定复现的操作路径(发行方式、微信开发者工具中的具体设置项)。
分类信息:已有 Windows 10、HBuilderX 5.26 正式版(与当前正式版一致),但缺少以下关键项,请补充:Vue 版本(描述中提到 vue3,请确认)、项目创建方式(HBuilderX 或 CLI)、微信开发者工具版本号、微信基础库版本号。
二、问题是否成立的分析
es6 转 es5 的执行主体是微信开发者工具。manifest.json 中 mp-weixin 节点下的 setting 配置对应微信开发者工具的项目设置,其中 es6 字段即“ES6 转 ES5”开关,minified 字段控制“上传代码时是否自动压缩”(https://uniapp.dcloud.net.cn/collocation/manifest.html#setting)。即 uni-app 侧压缩与微信工具侧转换是两个独立环节,二者的组合确实可能暴露转换器自身的缺陷。你描述的问题路径是值得排查的,不属于误报;但最终定性(uni-app 压缩环节、微信工具转换环节、或二者组合)需要依赖可复现样本。
社区存在同类现象记录:此前有开发者反馈过“vue3 打包微信小程序 es6 转 es5 各种报错,直接打包 es6 没问题”(https://ask.dcloud.net.cn/question/179810),与你描述的“es6 转 es5 环节出错、es6 产物本身正常”属于同一类问题,佐证了该现象路径的真实性。
关于 es6 转 es5 的必要性:官方文档说明“默认不需要在微信工具里继续开启es6转换”,仅当使用了 wxcomponents 目录下的微信 wxml 自定义组件时,才需要去微信工具开启转换(https://uniapp.dcloud.net.cn/tutorial/syntax-js.html#es6-支持),微信小程序运行环境本身支持 ES6 API(各端支持情况见同文档)。因此“必然要开启 es6 转 es5”这一前提并非绝对。需注意文档同时提示:使用微信小程序手势组件会强制开启 ES6 转 ES5。
三、对三个预期方案的评审
“编译发行时直接编译至 es5”:诉求可以理解,但全量降级会显著增加编译耗时与包体积,当前文档中也未提供此类配置项,我们会作为改进建议记录。
“es6 语法下避免相同命名变量”:实质是调整压缩工具的变量名生成策略,涉及编译链路改造,需要基于真实复现样本评估影响。
“去除变量名压缩,交由微信开发者工具压缩”:取消压缩会直接增大主包/分包体积,与小程序包体积限制存在冲突;且微信工具侧压缩与 es6 转 es5 组合是否产生同类问题亦未验证。
三个方案各有取舍,均需复现样本支撑决策,这也是需要你补充最小示例的原因。
四、临时规避建议
五、请补充以下信息
收到补充信息后,我们将进一步定性问题根源并推进处理。再次感谢你的反馈。