请教 babel 内联转译的问题

2020-04-17 10:14:53 +08:00
 phpxiaowangzi

如题， 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 来进行内联式操作

699 次点击
所在节点    问与答
3 条回复
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 感谢

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/663323

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX