请教 babel 内联转译的问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1680 天前的主题，其中的信息可能已经有所发展或是发生改变。

如题， 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 条回复 • 2020-04-17 21:23:23 +08:00

autoxbc

2020-04-17 18:32:36 +08:00

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

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

autoxbc

2020-04-17 18:53:15 +08:00

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

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

phpxiaowangzi

2020-04-17 21:23:23 +08:00

@autoxbc 感谢