Транспортируйте JavaScript внутри HTML-файла в ES5 - PullRequest
Новая
       13

Транспортируйте JavaScript внутри HTML-файла в ES5

0 голосов
/ 01 ноября 2018

У меня есть HTML-документ, который содержит много встроенного JavaScript в тегах сценария, а также в атрибутах других элементов (onload, onclick и т. Д.). Мне нужно, чтобы этот файл работал в среде, которая поддерживает только ES5. Однако в JavaScript используется множество новых функций, которые доступны только в ES6 и выше.

Транспортировка должна быть запущена с использованием сценария node.js (который, между прочим, отвечает за генерацию HTML-файла).

Я не мог найти хороший способ сделать это.

Моя первая идея была:

  • Используйте cheerio для перебора всех тегов скрипта
  • использовать babel для переноса innerHTML каждого тега
  • записать перенесенный 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)
...