时间戳

首页 > 解决方案 > 将 HTML 文件中的 JavaScript 转换为 ES5

javascript - 将 HTML 文件中的 JavaScript 转换为 ES5

问题描述

我有一个 HTML 文档，其中包含大量脚本标记中的内联 JavaScript，以及其他元素的属性（onload、onclick 等）。我需要使该文件在仅支持 ES5 的环境中工作。然而，JavaScript 使用了许多仅在 ES6 及更高版本中可用的新功能。

必须使用 node.js 脚本来触发转译（顺便说一句，该脚本首先负责生成 HTML 文件）。

我真的想不出这样做的好方法。

我的第一个想法是：

这很好用，但它完全忽略了 JavaScript 的onclick属性等，并且可能会创建大量冗余代码，因为转译器一次只知道一小部分代码。

简化示例：

// npm i cheerio @babel/core @babel/preset-env
const babel = require("@babel/core")
const cheerio = require("cheerio")

const generatedHtml = `
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Title of the document</title>
  </head>
  <body>
    <input type="number" id="input1" value="2"></input>
    to the power of
    <input type="number" id="input2" value="6"></input>
    =
    <input type="number" id="result"></input> <br />
    <button onclick="(()=>{document.getElementById('result').value = power(document.getElementById('input1'), document.getElementById('input2'))})()">Calculate</button>

    <script>
      const power = (a,b) => a.value**b.value
    </script>

    <script>
      (async()=>"Hello World")().then(console.log)
    </script>
  </body>
</html>
`;

(async()=>{
    const $ = cheerio.load(generatedHtml)
    for (const el of $('script').get()) {
        const originalCode = $(el).html()
        const transpiledCode = (await babel.transformAsync(originalCode, { presets: ["@babel/preset-env"] })).code
        $(el).html(transpiledCode)
    }
    const transpiledHtml = $.html()
    console.log(transpiledHtml)
})().catch(console.error)

标签： javascripthtmlnode.jsbabeljstranspiler

解决方案

推荐阅读