ES6转ES5的问题处理详解

news/2024/11/28 23:33:16/

各位同仁,想想什么情况下,我们需要做es6转es5呢?明明技术都那么成熟了。js版本语法不断更新,也更加满足不同业务所需。为啥还要往回走呢。无他,需要做向下兼容的时候。

当一个vue+element的纯html项目需要需要兼容IE9+的时候,于是,一系列的ES6到ES5的横向跨域转变就来了。

下面我说重点:

 IE解决各类兼容问题的js引入:

html5shiv-printshiv.min.js   让ie浏览器识别html5语法
prefixfree.min.js   让ie浏览器css3自动加上浏览器前缀兼容性
history.js   解决路由ie9不兼容HTML API问题
browser.min.js  解决es6语法
polyfill.min.js 解决es6语法

别问我为啥需要引入,我也不知道。干就完了

为了方便各位,有些js不太好找。我直接分享出来:

https://download.csdn.net/download/qq_34761385/15463562

es6=>es5转化
1)直接插入网页
Traceur允许将ES6代码直接插入网页。首先,必须在网页头部加载Traceur库文件
<script src="https://google.github.io/traceur-compiler/bin/traceur.js"></script>
<script src="https://google.github.io/traceur-compiler/bin/BrowserSystem.js"></script>
<script src="https://google.github.io/traceur-compiler/src/bootstrap.js"></script>
<script type="module">//你的es6代码import './Greeter.js';  //或者外部导入你的代码脚本
</script>
上面代码中,一共有4个script标签。第一个是加载Traceur的库文件,
第二个和第三个是将这个库文件用于浏览器环境,
第四个则是加载用户脚本,这个脚本里面可以使用ES6代码,开发人员编写的ES6代码最后都写在这里注意,第四个script标签的type属性的值是module,而不是text/javascript。
这是Traceur编译器识别ES6代码的标志,编译器会自动将所有type=module的代码编译为ES5,然后再交给浏览器执行2)直接插入网页
通过bable.js,polyfill.js进行转化,页面已先引入browser.min.js和polyfill.min.js文件。
<script src="../../browser.min.js"></script>
<script src="../../polyfill.min.js"></script>
<script type="text/bable">//直接写你的es6语法
<script>

注意事项:上面两种方法的type不是我们平时写js的type="text/javascript",而是type="module"type="text/bable"。而这也会导致一种问题,那就是js模块都不会自动加载。在hash跳转模式中,可能会导致页面js,css无法应用到。

比如从 http://xxxxx.com/index  =》   http://xxxxx.com/index#/man/del   

别怕,出现这种情况,还有最后一种简单粗暴的解决办法,我称之为一力破万法。那就是直接手动转。附上在线es6转es5网址:

Traceur在线es6转es5网址:http://google.github.io/traceur-compiler/demo/repl.html#


http://www.ppmy.cn/news/842289.html

相关文章

词典的屏幕取词功能(有道,金山,必应)

我的电脑WIN7_64,前两者目前的屏幕取词的支持不太好.尤其是对android studio.后来试了试必应ok了. 必应使用注意:按ctrl进行取词同时鼠标进行移动后才开始实施取词,而不是按ctrl后就直接取词. 为什么找到了必应:在各种网页版词典搜索grunt时只有必应的结果列表中出现了想要的…

通过代码调整系统音量,监听音量实体按键事件

转载至&#xff1a;http://www.vanbein.com/posts/ios%E8%BF%9B%E9%98%B6/2015/12/24/tong-guo-dai-ma-diao-zheng-xi-tong-yin-liang-,jian-ting-yin-liang-shi-ti-an-jian/#section-3 最近项目有个功能需要用到监听音量实体键&#xff0c;并能够通过滑动应用内的UISlider调整…

关于金山词霸的屏幕取词3

本文只对与几个关键性技术的实现细节进行讨论&#xff0c;其它的编程细节&#xff0c;请参考源程序。32位到16位的形式替换32位代码与16位代码的数据交换 动态修改Windows内核 1&#xff0e; 32bit到16bit的形式替换&#xff08;Thunk&#xff09;形 式替换是指那些允许从16位代…

客户手动调节音量的范围,修改默认音量各类型音量,按音量键或手动调进度条触发流程,调节音量大小级数每次加减的级数,同时操作指定多个音量类型,更改开机音量,通过底层节点来调节音量大小,音量控制的对话框UI

frameworks/base/services/core/java/com/android/server/audio/AudioService.java 客户手动调节音量的范围&#xff1a;就是按音量键出来的进度条&#xff0c;就算拉满这个音量也是可以调的 源码是&#xff0c;清晰可见&#xff0c;所以为啥打电话的听筒没办法降到无声&#…

google金山词霸推出挑战有道桌面词典

google金山词霸推出挑战有道桌面词典&#xff1a; 原来一直用有道的&#xff0c;觉得做的不错&#xff0c;现在突然看到了强强联手&#xff0c;看来又是一番激励的竞争。不过越来越感觉google.cn也是跟风的。原来有生活&#xff0c;输入法的推出

星际译王,金山词霸,有道词典,词库下载 2

七国语言词典 (19)&#xff1a; [七国语言]英汉机械工程大词典 13213[七国语言]英汉信息大词典 14788[七国语言]英汉数学大词典 12736[七国语言]英汉农业大词典 15560[七国语言]英汉地理大词典 16634[七国语言]英汉电子大词典 15552[七国语言]英汉公共大词典 5713[七国语言]英…

【转载】音乐开关及音量控制

在Component -- Audio下创造一个Audio Source 附于一个GameObject上&#xff0c;加上音乐&#xff0c;把playOnAwake勾去掉&#xff0c;然后将控制脚本附于它&#xff0c;再建一个GUI按钮来调用AudioSwitch()这个函数就OK了。 本帖隐藏的内容需要回复才可以浏览var myAudio; my…

金山词霸的词库读取程序(补充)

好几天没有发帖子了&#xff0c;对不起各位支持我的朋友&#xff01; // bow 因为这几天工作终于有了着落&#xff0c;在据了2个offer后&#xff0c;终于又收到了 一个不错的offer&#xff0c;难道是事不过三&#xff1f;不过同时还有一个很有希望、 也是我更加心仪的公司&…