如何让Vite转译HTML属性及Alpine.js指令中的JavaScript代码？

核心原因 #

Vite默认的esbuild转译流程仅处理独立JS文件与<script>标签内的代码，不会扫描HTML属性（如onclick）中的JS片段，因此这类代码即便用到目标浏览器不支持的语法，也不会被转译。

解决方案 #

要实现HTML属性内JS代码的转译，需通过自定义Vite插件拦截HTML文件，提取属性内的JS代码进行转译后再替换回原位置。

步骤1：安装依赖 #

需要用到cheerio解析HTML结构（esbuild为Vite内置，无需额外安装）：

npm install cheerio --save-dev

步骤2：编写Vite自定义插件 #

在vite.config.js中添加以下插件配置：

import { defineConfig } from 'vite'
import * as esbuild from 'esbuild'
import cheerio from 'cheerio'

export default defineConfig({
  plugins: [
    {
      name: 'html-attr-js-transpile',
      transformIndexHtml(html) {
        const $ = cheerio.load(html)
        
        // 处理所有on开头的事件属性
        $('[onclick], [onload], [onmouseenter]').each((_, elem) => {
          const $elem = $(elem)
          const eventAttrs = Object.keys(elem.attribs).filter(attr => attr.startsWith('on'))
          
          eventAttrs.forEach(attr => {
            const jsCode = $elem.attr(attr)
            if (!jsCode) return
            
            try {
              // 用esbuild转译代码，目标配置与Vite保持一致
              const transpiled = esbuild.transformSync(jsCode, {
                target: 'es2015', // 替换为你的目标浏览器配置，比如Vite的build.target
                format: 'esm'
              })
              $elem.attr(attr, transpiled.code.trim())
            } catch (err) {
              console.error(`转译${attr}属性代码失败:`, err)
            }
          })
        })

        // 扩展：处理Alpine.js指令（如x-show、x-on:click）
        $('[x-show], [x-on\\:click]').each((_, elem) => {
          const $elem = $(elem)
          const alpineAttrs = Object.keys(elem.attribs).filter(attr => attr.startsWith('x-'))
          
          alpineAttrs.forEach(attr => {
            const jsCode = $elem.attr(attr)
            if (!jsCode) return
            
            try {
              const transpiled = esbuild.transformSync(jsCode, {
                target: 'es2015',
                format: 'esm'
              })
              $elem.attr(attr, transpiled.code.trim())
            } catch (err) {
              console.error(`转译${attr}指令代码失败:`, err)
            }
          })
        })
        
        return $.html()
      }
    }
  ],
  build: {
    target: 'es2015' // 确保与插件内的target配置一致
  }
})

步骤3：验证效果 #

比如在HTML中编写：

<button onclick="const msg = '测试'; alert(msg)">点击触发</button>

构建后代码会被转译为兼容ES5的语法：

<button onclick="var msg = '测试'; alert(msg)">点击触发</button>

注意事项 #

• 可根据需求扩展插件中需要处理的属性范围，比如所有on*事件属性或Alpine.js的x-*指令。
• 保证esbuild的target配置与Vite的build.target一致，确保转译后的代码符合浏览器兼容要求。
• 复杂JS片段（如箭头函数、模板字符串）可被esbuild自动处理，无需额外配置。

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