Vite对接Shopify时CDN压缩失败问题求助

问题详情 #

两套独立配置的Vite-Shopify环境中，均出现ES5转换异常或未执行的问题，导致与Shopify不兼容。Vite生成的assets目录主脚本文件内出现Shopify CDN压缩失败提示：

/** Shopify CDN: Minification failed

Line 16:108 Transforming let to the configured target environment ("es5") is not supported yet
... and 366 more hidden warnings

**/

环境版本信息：

• Node Version: v20.2.0
• NPM Version: 9.6.6
• Vite: ^4.4.9
• vite-plugin-shopify: ^2.1.1
• npm-run-all: ^4.1.5
• @by-association-only/vite-plugin-shopify-clean: ^1.1.0

解决步骤 #

1. 强制Vite输出ES5代码并配置legacy插件 #

Vite默认构建目标并非ES5，需显式指定并配合legacy插件处理兼容：
首先安装依赖：

npm install @vitejs/plugin-legacy --save-dev

修改vite.config.js：

import legacy from '@vitejs/plugin-legacy';
import shopify from 'vite-plugin-shopify';

export default {
  plugins: [
    shopify(),
    legacy({
      targets: ['es5'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime']
    })
  ],
  build: {
    target: 'es5'
  }
};

2. 排查插件冲突 #

临时移除@by-association-only/vite-plugin-shopify-clean插件，重新构建后检查报错是否消失。部分清理类插件可能误删转换后的兼容代码。

3. 确保第三方依赖被转译 #

若项目依赖的第三方包本身使用ES6+语法，需在Vite配置中强制转译这些依赖：

export default {
  build: {
    commonjsOptions: {
      include: [/node_modules/]
    }
  },
  optimizeDeps: {
    include: ['需要转译的依赖包名']
  }
};

4. 尝试降级Node版本 #

Node v20对ES5转换的处理逻辑与低版本存在差异，可尝试降级至Node v16或v18，重新安装依赖并构建项目，验证问题是否解决。

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