如何使用babel转换index.html? [英] How to transpile index.html with babel?
问题描述
我有一个包含ES6模块的网页，我想将其与babel一起移植到ES5.遵循 https://babeljs.io/docs/setup/#installation 上的babel文档，我可以成功地使用./node_modules/.bin/babel js -d target转换javascript文件夹，但它们不会在其中转换任何HTML.我该如何翻译我的index.html?以相同的语法使用它会失败:
I have a webpage with ES6 modules that I want to transpile with babel to ES5. Following the babel documentation on https://babeljs.io/docs/setup/#installation, I can successfully transpile the javascript folder with ./node_modules/.bin/babel js -d target but they don't transpile any HTML there. How can I transpile my index.html? Using it with the same syntax fails:
./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的模块，实际页面要复杂得多.
I'm using babel 6.24.1 (babel-core 6.25.0) with npm 3.10.10. I know I don't need modules for this MWE, the real page is much more complex.
P.S .:我想继续开发未转译的版本，以保留我的工作流程.我只想将转译的代码用于生产.
P.S.: I want to continue developing the untranspiled version to preserve my workflow. I want to use the transpiled code only for production.
推荐答案
您不能.
Babel是JavaScript编译器，它不处理HTML，甚至不处理嵌入HTML的JavaScript.
Babel is a JavaScript transpiler, it doesn't deal with HTML, or even JavaScript embedded in HTML.
重写HTML以使用外部JavaScript.使用addEventListener代替内部事件处理程序属性.然后将Babel应用于JS文件.
Rewrite your HTML to use external JavaScript. Use addEventListener instead of intrinsic event handler attributes. Then apply Babel to the JS files.
这篇关于如何使用babel转换index.html?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
