ES6转ES5的问题处理详解

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