问题描述
我有一个包含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?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!