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

news/2024/7/11 1:49:44 标签: vue.js, es6, 前端

非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.jspackage.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 等


http://www.niftyadmin.cn/n/5103109.html

相关文章

C#WPF简单双精度动画应用实例

本文实例演示C#WPF简单双精度动画应用。通过实例快速了解动画。 一、DoubleAnimation介绍 DoubleAnimation可以用来创建一些简单的动画, 这些动画仅限于使用Double值的属性, 例如控件的位置, 尺寸, 缩放, 旋转, 或者透明度变化等。 二、实例 首先创建WPF项目,添加按钮。 更…

数据分析:密度图

目前拥有的数据如图,三列分别对应瑕疵种类,对应的置信 度,x方向坐标。 现在想要做的事是观看瑕疵种类和置信度之间的关系。 要显示数据分布的集中程度,可以使用以下几种常见的图形来观察: 1、箱线图(Box P…

Stable Diffusion的模型选择,采样器选择,关键词

一、Stable Diffusion的模型选择: 模型下载地址:https://civitai.com/,需要科学上网。 Deliberate:全能模型,prompt越详细生成的图片质量越好Realistic Vision:现实模型,生成仿真式图片&#…

Shopee买家通系统怎么用的?

Shopee买家通系统操作简单方便,可直接根据详细操作文档或操作演示视频进行设置操作。 1、自动批量注册买家号 准备好相应的账号资料后按照软件所需格式填写好之后即可运行注册,运行注册时可以自动输入手机号、自动处理遇到的图形验证、自动接收短信、自…

Java实现业务异步的几种方案

背景: 在java中异步线程很重要,比如在业务流处理时,需要通知硬件设备,发短信通知用户,或者需要上传一些图片资源到其他服务器这种耗时的操作,在主线程里处理会阻塞整理流程,而且我们也不需要等…

判断input标签的type类型为checkbox是否被选中

1.通过获取checked值判断,可不在事件函数内 // 1.判断单个复选框是否选中 var checkbox document.querySelector("#field23555"); // 使用选择器获取元素 if (checkbox.checked) {console.log("被选中了"); } else {console.log("未被选中…

单片机点亮led管(01)

如何开始学习单片机 1:实践第一 2:补充必要的理论知识,缺什么补什么 3:做工程积累经验(可以在网络上收集题目,也可以有自己的想法大胆的实验) 单片机是什么? 单片机&#xff08…

fastapi项目结构以及多进程部署

环境: python3.10.x Linux/centos 背景: 最近在用FastApi开发数据统计,并将统计数据返回给前端展示的数据系统。 数据库: mongodb, python包为mongoEngine 项目结构 main.py api middleware router-- __init__.py-- …