vue项目优雅降级，es6降为es5，适应低版本浏览器渲染

非vue项目

ECMAScript 6(ES6)的发展速度非常之快，但现代浏览器对ES6新特性支持度不高，所以要想在浏览器中直接使用ES6的新特性就得借助别的工具来实现。

Babel是一个广泛使用的转码器，babel可以将ES6代码完美地转换为ES5代码，所以我们不用等到浏览器的支持就可以在项目中使用ES6的特性。

bable将es6转译为es5

vue项目

通过vue-cli搭建的项目，则其实vue 已经引入了babel， 检查package.json是否有依赖 @vue/cli-plugin-babel，只需要配置babel.config.js 和 package.json里添加下面代码

• package.json

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead",
    "Chrome 40.0", // 兼容低版本谷歌
    "ie >= 9"  // 兼容ie 9
  ]

解释；
browserslist 是一个配置文件或配置项，用于指定项目或应用程序要支持的目标浏览器和浏览器版本。以确保代码在特定浏览器上运行良好。
示例中，browserslist 中的每个条目的含义如下：

1. "> 1%":

   • 这个条目表示您要支持全球浏览器市场份额超过 1% 的浏览器。这包括现代浏览器，但排除了非常不常见的老旧浏览器。

2. "last 2 versions":

   • 这个条目表示您要支持每个浏览器的最近两个主要版本。这有助于确保您的代码在最新的浏览器版本上运行良好。

3. "not dead":

   • 这个条目排除了不再维护的浏览器。通常情况下，不再维护的浏览器可能会存在许多安全漏洞，因此建议不支持它们。

4. "Chrome 40.0":

   • 这个条目表示您要支持 Chrome 浏览器的版本 40.0 及以上。这是一个特定版本的要求，用于确保在早期版本的 Chrome 中也能正常运行。

5. "ie >= 9":

   • 这个条目表示您要支持 Internet Explorer 9 及更高版本。这是一个明确的要求，以确保您的代码在较旧版本的 IE 中运行良好。

这些设置有助于确定您的项目的目标浏览器范围，以便您可以选择在构建和转换过程中应用适当的 polyfills 和转换，以确保您的代码在这些浏览器上运行良好。这对于确保跨浏览器兼容性非常重要，特别是在开发 Web 应用程序时。

---

以上是经过我验证的。这里测试用的是49版的老旧浏览器。特别老了。新项目在此浏览器上无法跑通，白屏，因为我的新项目有大量的es6新语法。旧版浏览器不支持。记录一下解决过程。主要是es6中的对象属性语法？。（作为es6特性代表去检测。果然是这样的，写个demo测试出来的）

---

现在使用的js语法，基本是ES5的规范 ，15年出的ES6的规范增加了很多其他语法，要看浏览器的支持情况，如果浏览器不支持那么就会报错

ES6 块级作用域 关键字let, 常量const,对象字面量的属性赋值简写,赋值解构,函数参数 - 默认值、参数打包、 数组展开（Default 、Rest 、Spread）,
箭头函数 Arrow functions,字符串模板 Template strings,Iterators（迭代器）+ for…of,生成器 （Generators）,class,Modules,Map + Set + WeakMap + WeakSet,Promises是处理异步操作的对象,Symbol是一种基本类型通过调用symbol函数产生,Symbol是一种基本类型。Symbol 通过调用symbol函数产生 等

一、桌面端浏览器对ES2015的支持情况
Chrome：51 版起便可以支持 97% 的 ES6 新特性。
Firefox：53 版起便可以支持 97% 的 ES6 新特性。
Safari：10 版起便可以支持 99% 的 ES6 新特性。
IE：Edge 15可以支持 96% 的 ES6 新特性。Edge 14 可以支持 93% 的 ES6 新特性。（IE7~11 基本不支持 ES6）

二、移动端浏览器对ES2015的支持情况
iOS：10.0 版起便可以支持 99% 的 ES6 新特性。
Android：基本不支持 ES6 新特性（5.1 仅支持 25%）

三、服务器对ES2015的支持情况
Node.js：6.5 版起便可以支持 97% 的 ES6 新特性。（6.0 支持 92%）

附：如何使用ES6的新特性，又能保证浏览器的兼容？
针对 ES6 的兼容性问题，很多团队为此开发出了多种语法解析转换工具，把我们写的 ES6 语法转换成 ES5，相当于在 ES6 和浏览器之间做了一个翻译官。比较通用的工具方案有 babel，jsx，traceur，es6-shim 等