Question

我有一个带有ES6模块的网页，我想用babel转发给ES5。关于https://babeljs.io/docs/setup/#installation上的babel文档，我可以使用./node_modules/.bin/babel js -d target成功地转换javascript文件夹，但它们不会在那里转换任何HTML。我怎样才能透露我的index.html？使用相同的语法失败：

./node_modules/.bin/babel index.html -d index2.html
SyntaxError: index.html: Unexpected token (1:0)
> 1 | <!DOCTYPE html>
    | ^
  2 | <html>
  3 | 
  4 | <head>

MWE

export default "Hello World";

    <!DOCTYPE html>
    <html>
    <body>
    <script type="module">
    import message from "./js/message.js";
    window.message = message;
    </script>
    <button onclick="alert(`Message: ${window.message}`);">Get Message</button>
    </body>
    </html>

我正在使用babel 6.24.1（babel-core 6.25.0）和npm 3.10.10。我知道我不需要这个MWE的模块，真正的页面要复杂得多。

P.S。：我想继续开发未翻译版本以保留我的工作流程。我想将转换后的代码仅用于生产。

Answer 1

你做不到。

Babel是一个JavaScript转换器，它不处理HTML，甚至不处理HTML中嵌入的JavaScript。

重写HTML以使用外部JavaScript。使用addEventListener而不是内部事件处理程序属性。然后将Babel应用于JS文件。

如何用babel转换index.html？

1 个答案: