zoukankan      html  css  js  c++  java
  • babel通过script标签引入无法解决低版本的ie兼容es6的问题(非解决方案,谈下遇到的坑)

    最近看到了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低版本浏览器的问题,

    我试了下,行不通。

    如果哪位朋友解决了这个问题,如果方便给份例子,感激不尽!

  • 相关阅读:
    vue的工作机制
    koa中的执行顺序
    vue项目中的keep-alive缓存
    vue项目中组件的重新初始化
    常用的JS代码块收集
    每个程序员都必须遵守的编程原则--转了
    自己写操作系统 2
    自己写操作系统 1
    【转】Hadoop安装教程_单机/伪分布式配置_Hadoop2.6.0/Ubuntu14.04
    ubuntu14.04LTS openssh-server 手动安装配置步骤
  • 原文地址:https://www.cnblogs.com/mayiaction/p/11826728.html
Copyright © 2011-2022 走看看