最近看到了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低版本浏览器的问题,
我试了下,行不通。
如果哪位朋友解决了这个问题,如果方便给份例子,感激不尽!