|
最近看到了es6的模板字符串，感觉使用起来太爽了，没有了字符串拼接，代码看起来也没那么难看了。
结果放到ie上边跑，不支持es6的写法，于是网上扒解决方案（我写的项目是很传统的项目，前后端不分离，没有用前端流行的脚手架之类的东西），结果发现大部分解决方案都不适用于我的传统项目。
看到有人说用babel，可以通过script标签引入的方式解决es6的问题，试了试，结果一堆坑，根本没法用。
问题一：如果是引入的js文件，谷歌就会报一个跨域的问题，ie是拒绝访问，edge竟然能跑。（下边的browser.js是使用npm下载的babel文件中的）
下边代码中使用src引入一个js文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="browser.js"></script>
<script type="text/babel" src="test1.js"></script>
</head>
<body>
</body>
</html>
报错信息：
谷歌报错：
ie报错：
问题二：
由于babel要求script标签设置为text/babel ，结果其执行时间总是很晚，要晚于text/javascript这种的script标签。
实际需求中往往需要一些默认的script标签在它之后运行才可以正常运行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="browser.js"></script>
<script type="text/babel">
console.log('我是babel');
</script>
<script type="text/javascript">
console.log('我是正常的script标签');
</script>
</head>
<body>
</body>
</html>
执行结果：
经过测试，如果要使用这种方式，如果能忍受我上边说的问题也可以，下边这样写ie的确能够解决es6的。注意script标签的type一定要是 text/babel。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="browser.js"></script>
<script type="text/babel">
let html = `fdsafdsaf`;
console.log(html);
</script>
</head>
<body>
</body>
</html>
基于以上原因，这种引入方式实在没法使用，可能是自己的打开方式不对？除了babel还试了个叫 polyfill.io的 ， 一点反应都没有。。。。，网上很多人发的用script引入它标签就能解决es6低版本浏览器的问题，
我试了下，行不通。
如果哪位朋友解决了这个问题，如果方便给份例子，感激不尽！
| 
|手机版|小黑屋|Java自学者论坛
( 声明：本站文章及资料整理自互联网，用于Java自学者交流学习使用，对资料版权不负任何法律责任，若有侵权请及时联系客服屏蔽删除 )
发表于 2021-4-12 02:20:43