请教 babel 内联转译的问题

This topic created in 2263 days ago, the information mentioned may be changed or developed.

如题， index.html

<!DOCTYPE html>
<html>
<head>
	<title>demo</title>
</head>
<body>
<script src="https://cdn.bootcss.com/babel-core/5.8.23/browser.js"></script>
<script src="script.js" type="text/babel">
</script>
</body>
</html>

script.js

const add = (x=5,y=6) => console.log(x+y);

访问浏览器，使用开发者工具查看并未发现有转译，是哪里操作错误了吗使用了 babel5 来进行内联式操作

script

内联

HTML

babel

3 replies • 2020-04-17 21:23:23 +08:00

autoxbc

Apr 17, 2020

我在 script.js 里加了一句 add() ，成功输出 11，说明是转译成功了，用的是不支持 ES6 的浏览器

你说没转译成功是指直接看 script.js 的内容？那个不会变的，babel 内联转译应该是 es6 string => es5 string => eval(es5 string)，如果你 hook eval 方法，可以看到那个 es5 string

autoxbc

Apr 17, 2020

以及在比较新的浏览器中测试时，index.html 必须放入 web server 用 http 协议访问

直接用浏览器打开是 file:// 协议，在 Firefox 中会出现 CORS 错误，在 Chrome 中会出现 sessionStorage 错误

phpxiaowangzi

Apr 17, 2020

@autoxbc 感谢