各位同仁,想想什么情况下,我们需要做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#